Students Empire

Learn Something New
Home

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.


			        <!DOCTYPE HTML>
			    <html>
			    <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>