Skip to content
Related Articles

Related Articles

Improve Article

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :