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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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> 

chevron_right






                        filter_none








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











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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>   



















                        chevron_right







                        filter_none








Output