How to require the current value of the gauge in HTML5 ?
Last Updated :
31 Mar, 2021
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...