Showing a Ranged Value
Description
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.
Example
You can see these attributes applied to the meter element as follows.
<!DOCTYPE HTML>
<html>
<body>
<meter id="mymeter" value="90" min="10" max="100" low="40" high="80"
optimum="60"></meter>
<!--from ww w . j a v a 2 s . c o m-->
<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>