HTML | DOM Input Range Object

Last Updated : 30 Aug, 2022

The Input Range Object in HTML DOM is used to represent the HTML < input > element with type="range".

This object is used to access or create the <input> element. This element can be accessed by using getElementById() method.

Syntax:

document.getElementById("Input_ID");

This Input_ID is assigned to HTML <input> element.

Example-1: Returning name of <input> element from "Geek_Range" id using document.getElementById("Geek_Range")

html

<!DOCTYPE html>  
<html>  
    <head> 
        <title> 
            HTML DOM Input RANGE Object 
        </title> 
    </head> 
    <style>
    #Geek_p{
       font-size:30px;
       color:green;
    }
    </style>
    <body style = "text-align:center;">  
  
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>  
          
        <h2>DOM Input Range Object</h2>  
        <input name = Geek_range 
               type="range"
               id="Geek_Range" 
                value="90">
        <br>
        <br>
        <button onclick = "myGeeks()"> 
            Click Here 
        </button> 
        <p id="Geek_p"></p>
        <script> 
            function myGeeks() {
             var x = document.getElementById("Geek_Range").name;
             document.getElementById("Geek_p").innerHTML = x;
          }
        </script> 
    </body>  
</html>

Output

Before click on the button:

After click on the button:

Example-2: Returning value of < input > element from "Geek_Range" id using document.getElementById("Geek_Range")

html

<!DOCTYPE html>  
<html>  
    <head> 
        <title> 
            HTML DOM Input RANGE Object 
        </title> 
    </head> 
    <style>
    #Geek_p{
       font-size:30px;
       color:green;
    }
    </style>
    <body style = "text-align:center;">  
  
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>  
          
        <h2>DOM Input Range Object</h2>  
        <input name = Geek_range 
               type="range" 
               id="Geek_Range" 
               value="90">
        <br>
        <br>
        <button onclick = "myGeeks()"> 
            Click Here 
        </button> 
        <p id="Geek_p"></p>
        <script> 
            function myGeeks() {
             var x = document.getElementById("Geek_Range").value;
             document.getElementById("Geek_p").innerHTML = x;
          }
        </script> 
    </body>  
</html>

Output

Before click on the button:

After click on the button:

Example-3: Creating < input > element with type = “range”.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            HTML DOM Input RANGE Object 
        </title> 
    </head> 
    <style> 
    </style> 
    <body style = "text-align:center;"> 
    
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1> 
            
        <h2>DOM Input Range Object</h2> 
        <br> 
        <button onclick = "myGeeks()"> 
            Click Here 
        </button> 
        <p id="Geek_p"></p>


 
        <script> 
            function myGeeks() { 
            var x = document.createElement("INPUT"); 
            x.setAttribute("type", "range"); 
            document.body.appendChild(x); 
        } 
        </script> 
    </body> 
</html>