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

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:

Article Tags :

HTML

Web Technologies

HTML-Attributes

Recommended Articles

1. How to Set a Minimum and Maximum Value for an input element in HTML5?

2. How to set the range that is considered to be a lowest and highest value in HTML5?

3. How to set the start value of an ordered list in HTML5 ?

4. How to define scalar measurement within a given range in HTML5 ?

5. How to specify the optimal value for the gauge in HTML5?

6. How to specify that a user can enter more than one value in an input element in HTML5?

7. How to specify that the user is required to select a value before submitting the form in HTML5 ?

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

9. How to give the value associated with the http-equiv or name attribute in HTML5 ?

10. How to set the height and width of the video player in HTML5 ?

11. How to Set the height and width of the Canvas in HTML5?

12. How to set a name for keygen element in HTML5 ?

13. How to set the language of text in the linked document in HTML5 ?

14. How to set a single line break in HTML5 ?

15. How to set smaller text using HTML5 ?

16. How to set the focus on drop-down list automatically when the page loads in HTML5?

17. How to set the name for the object in HTML5?

18. How to set a name for the metadata in HTML5 ?

19. How to set the security algorithm of key in HTML5 ?

20. How to set character encoding for document in HTML5 ?

21. How to set list in descending order in HTML5 ?

22. How to set multiple media resources for elements in HTML5 ?

23. How to set a keygen element that automatically get focused when page loads in HTML5 ?

24. How to set an alternate text for area in HTML5 ?

25. How to enable extra set of restrictions for content in an iframe element in HTML5 ?