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.