CODEWITHSUNDEEP
htmlcssprogress-bar
user1828605
user1828605

Reputation: 1735

How to create scale in the HTML5 meter?

I'm trying to create the meter bar with the scales as shown below. But I couldn't figure out how to make it start from 1 and ends at 5. Here, in the figure below, it seems like it's starting at some value and ends at some value > 5.

How can I fix this and still have all the middle values in equal distance?

enter image description here

meter::-webkit-meter-bar {
  height: 25px;
  background: none;
  background-color: whitesmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
  margin-bottom: 10px;
}

.scale {
  display: table;
  width: 100%;
  padding: 0px 0px 0px 0px;
  border: 0px 0px 0px 0px;
  text-align: center;
}

.scale li {
  width: 10%;
  display: table-cell;
  white-space: nowrap;
}

​ meter::-webkit-meter-optimum-value {
  background-image: -webkit-linear-gradient(/*90deg, 
            #8bcf69 20%, 
            #e6d450 20%,
            #e6d450 40%,
            #f28f68 40%,
            #f28f68 60%,
            #cf82bf 60%,
            #cf82bf 80%,
            #719fd1 80%,
            #719fd1 100%*/
  );
  transition: width 1s;
}
<div class="meter-wrapper">

  <meter min="1" max="5" value="{{prediction}}"></meter>
  <ul class="scale">
    <li class=""><span class="scale">1</span></li>
    <li><span class="scale">1.8</span></li>
    <li><span class="scale">2.6</span></li>
    <li><span class="scale">3.4</span></li>
    <li><span class="scale">4.2</span></li>
    <li class=""><span class="scale">5</span></li>
  </ul>

</div>

Upvotes: 0

Views: 519

Answers (1)

Dmytro Cheglakov
Dmytro Cheglakov

Reputation: 744

Please try this. I've replaced display table with flex, for better control.

meter::-webkit-meter-bar {
  height: 25px;
  background: none;
  background-color: whitesmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
  margin-bottom: 10px;
}

.scale {
  display: flex;
  width: 100%;
  padding: 0px;
  justify-content: space-between;
  list-style: none;
}

meter::-webkit-meter-optimum-value {
  background-image: -webkit-linear-gradient(/*90deg, 
            #8bcf69 20%, 
            #e6d450 20%,
            #e6d450 40%,
            #f28f68 40%,
            #f28f68 60%,
            #cf82bf 60%,
            #cf82bf 80%,
            #719fd1 80%,
            #719fd1 100%*/
  );
  transition: width 1s;
}
<div class="meter-wrapper">

  <meter min="1" max="5" value="{{prediction}}"></meter>
  <ul class="scale">
    <li class=""><span class="scale">1</span></li>
    <li><span class="scale">1.8</span></li>
    <li><span class="scale">2.6</span></li>
    <li><span class="scale">3.4</span></li>
    <li><span class="scale">4.2</span></li>
    <li class=""><span class="scale">5</span></li>
  </ul>

</div>

Upvotes: 1

Related Questions