HTML | DOM Input Range Object

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

This tag 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”)

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            HTML DOM 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”)

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            HTML DOM 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”.

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            HTML DOM 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>  

Output

Before click on the button:
After click on the button:

Supported Browsers:

Google Chrome
Mozilla Firefox
Edge
Safari
Opera

My Personal Notes

Recommended Posts: