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