HTML Tutorial - HTML Meter

The meter element shows a value displayed in the context of the range of possible values.

It has local attributes:value, min, max, low, high, optimum, form.

The min and max attributes set the bounds for the range of possible values. These can be expressed using floating-point numbers.

The display for the meter element can be broken into three segments: too low, too high, and just right.

The low attribute sets the value under which a value is considered to be too low,

The high attribute sets the value over which a value is considered to be too high.

The optimum attribute specifies the "just right" value.


You can see these attributes applied to the meter element as follows.

  <meter id="mymeter" value="90" min="10" max="100" low="40" high="80"
<!-- w w w  .jav a 2s  .  c  om-->
    <button type="button" value="30">30</button>
    <button type="button" value="60">60</button>
    <button type="button" value="90">90</button>
    var buttons = document.getElementsByTagName('BUTTON');
    var meter = document.getElementById('mymeter');
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function(e) {
        meter.value =;

Click to view the demo