Open In App

HTML | DOM Input Range Object

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output

  • Before click on the button:

 

  • After click on the button:

 

Supported Browsers:

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


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