Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this article. we are going to set the minimum and maximum value of the range in HTML5 by using the min and max attributes 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: In this example, we will set the maximum and minimum values of the range in HTML5.

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:


Last Updated : 01 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Similar Reads