Skip to content
Related Articles

Related Articles

HTML | DOM Input Range Object
  • Last Updated : 05 Feb, 2019

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

    full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :