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:
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.
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 green
Sections next to the âoptimum sectionâ yellow
Section that is two away from the âoptimum sectionâ 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.
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:
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:
green