<meter> tag in HTML
The <meter> tag is used for scalar measurement within a known range, or a fractional value.
Types of attribute in <meter> tag
- min
- max
- value
- low
- high
- optimum
- form
min, max and value attribute in <meter> tag
min - The lower bound of the range. This value will set the minimum valid number the value attribute will be able to take. Default value is 0.
max - The upper bound of the range. This value will set the maximum valid number the value attribute will be able to take. Default value is 1.
value - A numerical value indicating the current level of this measure. This attribute must contain a number between the values in min and max attributes.
low attribute in <meter> tag
A number in the range, defining an area of low values. All values that fall in the segment between the lower bound and this value are considered to be low values in this measurement.
high attribute in <meter> tag
A number in the range, defining an area of high values. All values that fall in the segment between the upper bound and this value are considered to be high values in this measurement.
Simple animation using javascript and <meter> tag
In the below example, we used <meter> tag and little bit of javascript code to dynamically change its value.
If you feel the below example is difficult to understand, leave it, we can see it deeply in other chapters.