The meter Element

Live Demo

0.5 of 4
1.5 of 4
2.5 of 4
3 of 4
4 of 4
Grade: D-

Firefox 16+	Safari 5.2+	Safari 8-	Chrome 8+	Opera 11+	IE 11-	Android 4.4+

The Low Down

The <meter> element create a gauge UI representing a value within a range.

• The value attribute is required, and should be a value between the min and max values. If it falls outside that range, it will default to either the min or max value, whichever is closest in value. If omitted, it defaults to 0 or min.
• The min attribute value is the minimum value of the meter. If you forget to include it, it defaults to 0.
• The max attribute value is the maximum value of the meter. If you forget to include it, it defaults to 1.
• While <meter> will render even if min, max and value are omitted, value is required, and you should consider min and max as required as well.
• <meter> shouldn’t be used for an arbitrary range: rather, use it when there is a mi nu mum value, a maximum value and optimal values, and the value can go up and down, like a gas tank or blood pressure, unless there is a known maximum value.
• Other attributes include low, high and optimum: If the value is between min and low, the meter is yellow. If the value is the low value, the high value, or anywhere in between, the meter is green. If the value is between high and max, it will be red. Currently the optimum value has no noticeable effect.
• Possible uses: final grade (61 out of 100), blood pressure, displaying disk usage, or the relevance of a search query result.
• Defaults to inline-block so you can set width/height.
• Polyfill code here.
• The <meter> element should not be used to indicate progress: instead use a <progress> bar.