In this article, we will learn how to set the value that would be known as a low and high value of the range. This is done using the low and high attributes. The high attribute is always less than the max attribute value but more than the min attribute and low attribute value. Similarly, the low attribute is always more than the min attribute but less than the max and high attribute values. The meter element will show the value in a different color if it is not within the low and high range.
Syntax:
<meter low="number" high="number">
Example: In this example, we are using <meter> tag for considering a range value
HTML
<!DOCTYPE html><html>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
How to set the range that is
considered to be a lowest and
highest value
in HTML5?
</h3>
<p>When the value is inside low and high</p>
<meter value="5" min="0"
max="10" low="2" high="8">
</meter>
<p>When the value is below low</p>
<meter value="1" min="0"
max="10" low="2" high="8">
</meter>
<p>When the value is over high</p>
<meter value="9" min="0"
max="10" low="2" high="8">
</meter>
</body>
</html>
|
Output: