Skip to content
Related Articles

Related Articles

How to set minimum and maximum value of range in HTML5 ?

Improve Article
Save Article
  • Last Updated : 13 Apr, 2021
Improve Article
Save Article

In this article. we are going to set the minimum and maximum value of the range in HTML5 by using the min and max attribute in the <meter> element. 

Approach: This can be implemented by using the min and max attributes:

  • min: This attribute is used to specify the lower bound of the gauge. The value of the min attribute is always less than the max attribute. It has a default value which is 0.
  • max: This attribute is used to specify the upper bound of the gauge. The value of the max attribute must be greater than the min attribute. It has a default value which is 1.

Syntax:

<meter min="number" max="number">

Example:

HTML




<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <h1>GeeksforGeeks</h1>
  
    <h2>
        How to set the minimum and 
        maximum<br>value of the range 
        in HTML5?
    </h2
      
    Sachin's score:
    <meter value="5" min="0"
        max="10" high="6">
        5 out of 10
    </meter>
  
    <br>Laxma sxore:
    <meter value="0.5" max="1.0" 
        min="0" high="0.6">
        50% from 100%
    </meter>
</body>
  
</html>


Output:

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!