Inconsistency between <meter> element colors without 'optimum' attribute

MDN Learn
#1

Hi,

As I was reading through the article Other form controls and on the section Progress and meter they explained the different attributes used with <meter> element.

With the optimum attribute everything works as expected like <meter> changes color from green to yellow and then red based on the different attribute values. Confusing arises when the optimum attribute is not present for example:

<meter id="fuel" min="0" max="100" low="33" high="66" value="25">25</meter>

According to the <meter>: The HTML Meter element page they says, the low attribute Specifies the range that is considered to be a low value and it must be between min and max attribute values which it is. So we should expect the color of this meter to be red because it is in the lower part of the range but it is not red it is yellow as the value which is 25 is between min and low.

Similarly, if we change the value to 75 which is higher than the high value it should be red but again it is yellow. I thought maybe without the optimum attribute it is behaving differently but then I found an example on the MDN meter page the example is:

He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.

Here there is no optimum attribute present but the <meter> seems to work as expected the color is red but why is this working and the above example is not after digging into the example I found if we set the low value greater than 50 like 51 then it will work as expected I don’t know why this is happening maybe there is a default value for optimum attribute I don’t know that is where I hoping to get an explanation.

Thank you.

#2

Hi @Junaid_Ali

I have never worked with the <meter> element, but I had a look at the HTML specification about the “optimum” value:

If the optimum attribute is specified and a value could be parsed out of it, then the candidate optimum point is that value. Otherwise, the candidate optimum point is the midpoint between the minimum value and the maximum value.

Your assumption about a default value is therefore correct. In both of your examples the implicit optimum value is “50”, because both have a min of “0” and a max of “100”. The min in the second example is the default value.

About the coloring the rule seems to be:

  • There are three sections: “min - low” / “low - high” / “high - max”
  • The section with the optimum :arrow_right: green
  • Sections next to the “optimum section” :arrow_right: yellow
  • Section that is two away from the “optimum section” :arrow_right: red

So when the middle section contains the optimum, it’s green and the left and right sections are yellow. When the left section contains the optimum then the middle section is yellow and the right section is red.

I think this would explain all the different behaviors you have discovered.

Have a nice weekend,
Michael

1 Like
#3

Hi @mikoMK

First of all, thank you very much for the response. You have cleared my confusion by providing the tiny detail in the spec that is:

If we don’t provide the ‘optimum’ attribute then the optimum point will be the midpoint between the minimum value and the maximum value.

It makes sense now that’s why the example on MDN was working the low value was above the midpoint. So without the optimum attribute, we can provide the optimum point value in the low attribute which needs to be the midpoint between the min and max attribute values plus 1 which is important. For example, take the following example:

<meter min="0" low="31" high="45" max="60" value="50">50</meter>

According to the specs you provided the midpoint will be 30 + 1 = 31 which will be the optimum point and we can set the high value wherever we want as long as it is between the low and the max values. The above example will show the red color as it is in the last section. Similarly the below example:

<meter min="0" low="11" high="15" max="20" value="5">B</meter>

will show the green color as it is in the first part of the section. I think I got it right!

Thank you again for the answer I really appreciate it. :+1:

1 Like