<meter>

The meter element shows a value from the range of possible values. The min and max attributes set the bounds for the range.

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 considered to be too low, and the high attribute sets the value considered to be too high. The optimum attribute specifies the not-too-high-not-too-low value.

 


<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
    </head> 
    <body> 
        <meter id="mymeter" value="90" 
               min="10" max="100" low="40" high="80" optimum="60"></meter> 
        <p> 
            <button type="button" value="30">30</button> 
            <button type="button" value="60">60</button> 
            <button type="button" value="90">90</button> 
        </p> 
        <script> 
            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 = e.target.value; 
                }; 
            } 
        </script> 
    </body> 
</html>

Click to view this demo.

Home
HTML CSS Book
HTML reference

Tag: