The meter tag

The meter tag is used to display some value in a nicely formatted way.

The tag's appearance is a partially or fully painted strip. The strip can be green, yellow or red (the strip's color depends on the attribute values, which will be discussed below):

The meter tag should be used, for example, in the following situation: you want to display the current temperature value, and the temperature can change from 0 to 100. You should specify the following attributes: the value attribute should indicate the current temperature value, the min attribute - the minimum possible value (in our case 0), the max attribute - the maximum possible value (in our case 100).

Depending on the value of the value attribute, the bar will be small or large. If you specify value as 10, the bar will be small (since 10 is very close to the minimum - to zero), but if you specify the value 90, the bar will be large (since 90 is close to the maximum - to 100). If you specify the value 100, the bar will occupy the entire element (since the value has reached the maximum).

If you specify a value greater than 100, the stripe will still occupy the entire element. If you specify 0 or less, there will be no stripe at all.

Example

The value attribute value is small:

:

Example

The value attribute value is large:

:

Example

The value attribute value average:

:

Example

The value attribute value is equal to the maximum:

:

Example

The value of the value attribute is equal to the minimum:

:

Example

The value attribute value is greater than maximum:

:

Example

The value attribute value is less than minimum:

:

Add low and high attributes

In the meter tag there are also 2 attributes: low and high.

Let's consider their work using temperature as an example. Let me remind you that our minimum temperature is 0, and the maximum is 100. Now let's say we want to make the following ranges - "cold temperature" from 0 to 20, "normal" from 20 to 80 and "hot" from 80 to 100.

To set a cold temperature, we specify the value of the attribute low as the number 20. It turns out that from zero (this is the value of the attribute min) to 20 (the value of the attribute low) we have the area of ​​low values.

To set the hot temperature, we specify the value of the attribute high as the number 80. It turns out that from 80 (this is the value of the attribute high) to 100 (the value of the attribute max) we have the area of ​​high values.

The normal temperature will be from 20 (this is the value of the attribute low) to 80 (the value of the attribute high). We will call this area the region of normal values.

Now, depending on which area the value of the attribute value falls into, the strip will be colored green or yellow. Green will be if we are in the normal value area, and yellow - if in the high or low value area.

Example

The value of the attribute value falls in the low value region:

:

Example

The value of the attribute value will fall into the normal value range:

:

Example

The value of the attribute value will fall into the high value area:

:

Adding the optimum attribute

The optimum attribute defines the optimal value. For our example, the optimal temperature could be cold, normal, or hot - it's up to you. Let's say you specify that the optimal temperature is cold. Now, depending on the value of the value attribute (that is, the current temperature), the color of the bar will be green, yellow, or red.

If the current temperature falls within the optimal temperature range (and we have indicated that optimal is cold), the stripe will be green. If the current temperature falls within the range adjacent to the optimal range (in our case, this is normal temperature), the stripe will turn yellow. If the current temperature does not fall within the range adjacent to the optimal range (in our case, this is hot temperature), the stripe will turn red.

The same thing will happen if you specify hot as the optimal temperature. In this case, if the current temperature is in the hot temperature range, the strip will be green, if it is in the normal range, it will be yellow, and if it is in the cold range, it will be red.

If the optimal temperature is set to normal, the strip can only be green (if the current temperature is within normal) or yellow (if the current temperature is within the normal temperature neighbor, which is hot or cold).

To specify which range is optimal, specify any number from that range as the value of the optimum attribute.

In the examples below, the attribute value optimum falls in the low value region (i.e. cold temperatures).

Example

The value of the attribute value falls in the low value region:

:

Example

The value of the attribute value falls within the normal value range:

:

Example

The attribute value value falls in the high value area:

:

In the examples below, the value of the attribute optimum falls in the high value area (i.e. hot temperatures).

Example

The value of the attribute value falls in the low value region:

:

Example

The value of the attribute value falls within the normal value range:

:

Example

The attribute value value falls in the high value area:

:

---

In the examples below, the value of the attribute optimum falls within the normal value range (i.e. normal temperatures).

Example

The value of the attribute value falls in the low value region:

:

Example

The value of the attribute value falls within the normal value range:

:

Example

The attribute value value falls in the high value area:

:

Old browsers

Old browsers will not be able to display the meter tag nicely and will display the content of the tag itself instead:

:

Attributes

The value of attributes can be a fractional or negative number.

Attribute	Description
value	Sets the current value. Required attribute.
min	Specifies the minimum possible value. Default value: 0.
max	Sets the maximum possible value. Default value: 1.
low	Specifies the boundary of the low value region. Low values ​​will be from the number in the min attribute to the number in the low attribute.
high	Specifies the boundary of the low value region. Low values ​​will be from the number in the high attribute to the number in the max attribute.
optimum	Defines the region of optimal values.

See also