Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 13 Apr, 2021

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:

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

  • 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
Recommended Articles
Page :