Open In App

HTML | DOM Input Range max Property

Improve
Improve
Like Article
Like
Save
Share
Report

The Input Range max Property in HTML DOM is used to set or return the value of max attribute of the slider control. The max attribute is used to specify the maximum value of slider control. 

Syntax:

  • It returns the Input Range max Property:
rangeObject.max
  • It is used to set Input Range max Property:
rangeObject.max = number

Property Values: It contains single value number which specify the maximum value allowed for the slider control. 

Return Values: It returns a string which represents the maximum allowed value. 

Example-1: Returns the Input Range max Property 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        DOM Input Range max Property
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
            GeeksForGeeks
        </h1>
 
    <h2>DOM Input Range max Property</h2>
 
    <input type="range"
           id="myRange"
           min="10"
           max="50">
 
    <br>
    <br>
 
    <button onclick="myGeeks()">
        Click Here!
    </button>
 
    <p id="GFG"
       style="font-size:23px;
              color:green;">
  </p>
 
    <script>
        function myGeeks() {
 
            // Return Input range max Property
            var x =
                document.getElementById(
                  "myRange").max;
           
            document.getElementById(
              "GFG").innerHTML = x;
        }
    </script>
 
</body>
 
</html>


Output: 

Before Click on button:

  

After Click on button:

  

Example-2: Set Input Range max Property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        DOM Input Range max Property
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
            GeeksForGeeks
        </h1>
 
    <h2>
      DOM Input Range max Property
  </h2>
 
    <input type="range"
           id="myRange"
           min="10"
           max="50">
 
    <br>
    <br>
 
    <button onclick="myGeeks()">
        Click Here!
    </button>
 
    <p id="GFG"
       style="font-size:23px;
              color:green;">
  </p>
 
    <script>
        function myGeeks() {
 
            // Setting Input Range max Property
            var x =
                document.getElementById(
                  "myRange").max = "70";
 
            document.getElementById(
              "GFG").innerHTML =
                "The value of the max attribute"+
              " was changed to " + x;
        }
    </script>
 
</body>
 
</html>


Output: 

Before Click on button:

  

After Click on button:

  

Supported Browsers: The browser supported by DOM Input Range max Property are listed below:

  • Google Chrome 4 and above
  • Edge 12 and above
  • Firefox 23 and above
  • Opera 11 and above
  • Safari 3.1 and above


Last Updated : 31 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads