HTML | DOM Input Range Object
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
Please Login to comment...