Embedded Files
The <meter> element displays colored bars to represent numeric values.
It can be useful to display a colored gauge to show disk usage, to highlight the relevance of a query result, or the fraction of a voting population that favours a particular candidate, etc. This element is often used with the <input type="range"> field as an instant feedback indicator.
The <meter> element should not be used to indicate progress. You should instead use a <progress> element.
Typical use
Typical use
Storage space used: <meter value=75 min=0 low=20 high=80 max=100 optimum=50></meter>
The <meter> element uses the easy-to-understand value, min, max, low, high and optimum attributes. The optimum attribute, along with min, low, high and max attributes will affect the color of the bar, and of course the constraint min < low < high < max should be respected.
More explanations about the colors and the meaning of the optimum attribute will come further in this lesson.
Interactive example
Interactive example
Try the next example online at JSBin or just play with it in your browser by dragging the slider below:
Source code of the example:
<p>Grades: <meter id="meter2" value="75" min="0" low="20" high="80" max="100"></meter>
<input min="0" max="100" value="75" id="meter2range"
oninput="effect('meter2', 'meter2range')" type="range">
<output id="meter2val" for="meter2range"></output></p>
<script>
function effect(meter, meterrange) {
var currVal = document.getElementById(meterrange).value;
document.getElementById(meter).value = currVal;
document.getElementById(meter+ "val").innerHTML = currVal;
}
</script>
Explanations:
Explanations:
The link between the slider (an <input type=range>) and the meter element is done using an input event handler (oninput="effect(...)") at line 4.
The effect JavaScript function will change the current value of the <meter> element (line 9) and update the displayed html content of the <output> element (line 10).
The color of the gauge changes depending on the attribute's values
The color of the gauge changes depending on the attribute's values
The optimum attribute indicates the optimal numeric value and gives an indication where along the range is considered preferable. Just think of the <meter> ranges as follows:
Range 1: between min and low
Range 2: between low and high
Range 3: between high and max
... and depending on the value you set to optimum attribute, one of the ranges above becomes the "good (optimum)" range.
So in the previous example, with the value of the optimum attribute set to 19, a number between min and low (not inclusive), the Range 1 (between min=0 and low=20) becomes the "good (optimum)" range (displayed in green), the Range 3 (between high=80 and max=100) becomes the "bad" (displayed in red color) range, and the Range 2, in the middle, will be displayed in yellow (not optimum, not bad).
So, a <meter> element used for displaying blood pressure might be a good candidate for setting the optimum value to "Range 2", and a <meter> element used for displaying memory usage might be a good candidate for setting the optimum value to "Range 1", meaning that a low memory usage is "good".
External resources
External resources
From MDN's Web Docs: The HTML Meter element
Good blog post: How to use and style the meter element
Page updated
Google Sites
Report abuse