Posted By
Bajarangi soft ,
Posted On 01-10-2020
Input Range Object
The Input Range object represents an HTML <input> element with type="range".
Note: <input> elements with type="range" are not supported in Internet Explorer 9 and earlier versions.
Access an Input Range Object
You can access an <input> element with type="range" by using getElementById():
Example(1)
<input type="range" id="myRange" value="90">
<button onclick="create_new_range()">Click it</button>
<h2 id="demo"></h2>
<script>
function create_new_range() {
var x = document.getElementById("myRange").value;
document.getElementById("demo").innerHTML = x;
}
</script>
<button class="btn btn-success" onclick="creat_input_range()">Create it</button>
<script>
function creat_input_range() {
var x = document.createElement("INPUT");
x.setAttribute("type", "range");
document.body.appendChild(x);
}
</script>
Input Range Object Properties
| Property | Description |
|---|---|
| autocomplete | Sets or returns the value of the autocomplete attribute of a slider control |
| autofocus | Sets or returns whether a slider control should automatically get focus when the page loads |
| defaultValue | Sets or returns the default value of a slider control |
| disabled | Sets or returns whether a slider control is disabled, or not |
| form | Returns a reference to the form that contains the slider control |
| list | Returns a reference to the datalist that contains the slider control |
| max | Sets or returns the value of the max attribute of the slider control |
| min | Sets or returns the value of the min attribute of the slider control |
| name | Sets or returns the value of the name attribute of a slider control |
| step | Sets or returns the value of the step attribute of the slider control |
| type | Returns which type of form element the slider control is |
| value | Sets or returns the value of the value attribute of a slider control |
Input Range Object Methods
| Method | Description |
|---|---|
| stepDown() | Decrements the value of the slider control by a specified number |
| stepUp() | Increments the value of the slider control by a specified number |
<!DOCTYPE html>
<html>
<head>
<title>How To Use HTML DOM Input Range Object In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
.INPUT{
margin-left: 80px;
}
#myLocalDate{
margin-left: 0px !important;
}
h1{
color: red;
}
input[type="range" i] {
width: 135px;
margin-left: 105px;
}
</style>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1>Use HTML DOM Input Range Object In JavaScript</h1>
</div>
<br>
<div class="well">
<input type="range" id="myRange" value="90">
<button class="btn btn-primary" onclick="get_value()">Click it</button>
<h2 id="demo"></h2>
<button class="btn btn-success" onclick="creat_input_range()">Create it</button>
<script>
function get_value() {
var x = document.getElementById("myRange").value;
document.getElementById("demo").innerHTML = x;
}
function creat_input_range() {
var x = document.createElement("INPUT");
x.setAttribute("type", "range");
document.body.appendChild(x);
}
</script>
</div>
<div>
</body>
</html>