CODEWITHSUNDEEP
html
alexis
alexis

Reputation: 397

What exactly do the low, high and optimum attributes do in the meter element?

The MDN uses the name of these attributes too describe them, so it doesn't really explain them. They dont really seem to have a default functionality to them, so I'm assuming min and max needs to be used with them. Does the browser use them somehow, or is their sole purpose to be used with javascript? Also is it possible to style the meter's other then width and height?

<meter min="0" low="30"  value="50" optimum="50" high="80" max="100" >
    What is their use?
</meter>

Upvotes: 3

Views: 894

Answers (1)

Manish
Manish

Reputation: 5066

These three attribute high, low,optimum does not have any such significant effect but do effect the color of the meter gauge based on the value and the value of these attributes. The color varies between yellow, red, green. Below is a small demo.

<h3>
  Values Without optimum value
</h3>

Value between low and high:<meter value=50 min=0 max=100 low=30 high=90></meter><br> Value less than low and greater than min:<meter value=25 min=0 max=100 low=30 high=90></meter><br> Value greater than high and less than max:<meter value=95 min=0 max=100 low=30 high=90></meter><br> Value equal to high :<meter value=90 min=0 max=100 low=30 high=90></meter><br> Value equal to low :<meter value=30 min=0 max=100 low=30 high=90></meter><br> 
Value greater than high and less than max :<meter value=95 min=0 max=100 low=30 high=90></meter><br> 
MDN Example: value is greater than high:<meter min=0 low=69 high=80 max=100 value=84></meter>


<h3>
  Values With optimum value Greater Than high
</h3>

Value between low and high:<meter value=50 min=0 max=100 low=30 high=90 optimum=95></meter><br> 
Value less than low and greater than min:<meter value=25 min=0 max=100 low=30 high=90 optimum=95></meter><br> Value greater than high and less than max: <meter value=95 min=0 max=100 low=30 high=90 optimum=95></meter><br>
Value equal to high :<meter value=90 min=0 max=100 low=30 high=90 optimum=95></meter><br> 
Value equal to low :<meter value=30 min=0 max=100 low=30 high=90 optimum=95></meter><br> 
Value greater than high and less than max :<meter value=95 min=0 max=100 low=30 high=90 optimum=95></meter><br>

  <h3>
    Values With optimum value Less Than high
  </h3>

  Value between low and high:<meter value=50 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value less than low and greater than min:<meter value=25 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value greater than high and less than max:
  <meter value=95 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value equal to high :<meter value=90 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value equal to low :<meter value=30 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value greater than high and less than max :<meter value=95  min=0 max=100 low=30 high=90 optimum=85></meter><br>

In the above demo you can observe the difference between the colors of the meter gauge based on its value and low-high range. Though i Think there is still a inconsistency as you can see the last two meter gauges in the first group both have value greater than high value but still are of different color.

Even after spending hours in googling i was also not able to get the exact explanation for these attributes. But above is what i had found out.

Hope this helps you :)

Upvotes: 6

Related Questions