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”)
<!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
- Before click on the button: