HTML DOM Input Range list Property
Last Updated :
30 Aug, 2022
Improve
The input Range list property in HTML DOM is used to return a reference to the datalist element that contains an input range field.
Syntax:
rangeObject.list.id
Return Value: It returns a string value that represents the value of the id attribute of the datalist element.
Example: Below HTML code is used to return the input range list property.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input range list Property
</title>
<style>
#Geek_p {
font-size: 30px;
color: green;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Range value property</h2>
<input name=G eek_range type="range"
id="Geek_Range" list="rangers" value="90">
<datalist id="rangers">
<option value="15"/>
<option value="20"/>
<option value="40"/>
<option value="30"/>
<option value="35"/>
</datalist>
<br>
<br>
<button onclick="myGeeks()">
Click Here
</button>
<p id="Geek_p"></p>
<script>
function myGeeks() {
var x =
document.getElementById(
"Geek_Range").list.id;
document.getElementById(
"Geek_p").innerHTML = x;
}
</script>
</body>
</html>
<html><head> <title> HTML DOM Input range list Property </title> <style> #Geek_p { font-size: 30px; color: green; } </style></head><body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Input Range value property</h2> <input name=G eek_range type="range" id="Geek_Range" list="rangers" value="90"> <datalist id="rangers"> <option value="15"/> <option value="20"/> <option value="40"/> <option value="30"/> <option value="35"/> </datalist> <br> <br> <button onclick="myGeeks()"> Click Here </button> <p id="Geek_p"></p> <script> function myGeeks() { var x = document.getElementById( "Geek_Range").list.id; document.getElementById( "Geek_p").innerHTML = x; } </script></body></html>Output:
Supported Browsers: The browser is supported by DOM input range list property are listed below:
- Google Chrome 4
- Edge 12
- Firefox 23
- Opera 11
- Safari 3.1
