How to require the current value of the gauge in HTML5 ?
A Gauge is a marker that can be in the form of a dial or a bar. It has min, max, high, and low attributes to display the amount of data provided to it.
In HTML5 <meter> tag is used to display and measure the data in a given range in the form of a gauge. The following attributes are used with the <meter> tag in HTML5.
Syntax:
<meter min_value=”value” low_value=”value” high_value=”value” max_value=”value”> current_value=”value” </meter>
Example: The following example demonstrates getting the current value of the gauge in HTML5. In the code the following values are set for the attributes.
- The min value is set to 0
- The max value is set to 100
- The low value is set to 10
- The high value is set to 90
- The current value/score of the student is specified in the value attribute.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /></head><body> <h2 style="color:green">GeeksforGeeks </h2> <p> <b>The scores of the students: </b> </p> <p> A: <meter min="0" low="10" high="90" max="100" value="40"></meter> </p> <p> B: <meter min="0" low="10" high="90" max="100" value="70"></meter> </p> <p> C: <meter min="0" low="10" high="90" max="100" value="45"></meter> </p> <p> D: <meter min="0" low="10" high="90" max="100" value="90"></meter> </p> <p> E: <meter min="0" low="10" high="90" max="100" value="55"></meter> </p> <p> F: <meter min="0" low="10" high="90" max="100" value="96"></meter> </p> </body></html> |
Output: The bar in the gauge displays a yellow color if the value (current) is greater than the high value or smaller than the low value. The bar in the gauge displays a green color if the value (current) is between the low and the high value.
Gauge values
Please Login to comment...