Skip to content
Related Articles

Related Articles

How to require the current value of the gauge in HTML5 ?

View Discussion
Improve Article
Save Article
  • 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!