HTML <meter>

23rd February 2020 | Christopher Pisani

The HTML element <meter> is used as a scale measurment or a static measurment. Altough it looks like the <progress> element, it should not be confused with it. To make things simple, use <meter> where you are showing a percentage of something that will not change and <progress> when something will change in it's value, like for example loading.

In the following example, you can see different values with the same element, to show the effects it produces. Note, that no CSS was used to change the colours of the guage.

<!-- When value is lower than minimum, the value assimilates to closest value -->
Value -20/100<meter min="0" max="100" low="30" high="70" optimum="90" value="-20"></meter>
<br>

Value 0/100<meter min="0" max="100" low="30" high="70" optimum="90" value="0"></meter>
<br>

Value 10/100<meter min="0" max="100" low="30" high="70" optimum="90" value="10"></meter>
<br>

Value 25/100<meter min="0" max="100" low="30" high="70" optimum="90" value="25"></meter>
<br>

Value 35/100<meter min="0" max="100" low="30" high="70" optimum="90" value="35"></meter>
<br>

Value 50/100<meter min="0" max="100" low="30" high="70" optimum="90" value="50"></meter>
<br>

Value 70/100<meter min="0" max="100" low="30" high="70" optimum="90" value="70"></meter>
<br>

Value 90/100<meter min="0" max="100" low="30" high="70" optimum="90" value="90"></meter>
<br>

Value 100/100<meter min="0" max="100" low="30" high="70" optimum="90" value="100"></meter>
<br>

<!-- When value is higher than maximum, the value assimilates to closest value -->
Value 150/100<meter min="0" max="100" low="30" high="70" optimum="90" value="150"></meter>
<br>

Available Attributes

Attribute	Values	Functionality
form	form id	The id of the form associated with
high	number	The highest value in the guage
low	number	The lowest value in the guage
max	number	The maximum value range
min	number	The minimum value range
optimum	number	The optimal value for the range
value	number	Sets the value for the guage