<meter>
A gauge for a value within a known range: battery, usage, a rating.
Syntax
<meter value="0.6" min="0" max="1"></meter>Attributes
| Parameter | Type | Description |
|---|---|---|
| value | number | The current value. |
| min, max | number | The range limits (0 and 1 by default). |
| low, high, optimum | number | Optional. The low and high zones and the best value — they decide the colour. |
Examples
The colour depends on the zone:
<p>Battery: <meter value="85" min="0" max="100" low="20" high="80" optimum="100"></meter></p>
<p>Battery: <meter value="50" min="0" max="100" low="20" high="80" optimum="100"></meter></p>
<p>Battery: <meter value="10" min="0" max="100" low="20" high="80" optimum="100"></meter></p>Notes
<meter> shows a measurement, while <progress> shows how far a task has got. The look depends on the browser; restyling it completely with CSS is hard.
See also
- <progress> — A progress bar for a task: an upload, the steps of a form.
- <output> — The result of a calculation or a user action.
Related recipes
In the tutorial
- Input types — The type attribute of input — text, email, password, numbers and sliders, dates, checkboxes, radio buttons, colour and file.