Javascript Reference - HTML DOM Input Range Object

The Input Range object represents an HTML <input> element with type="range".

Example

We can access an <input> element with type="range" by using getElementById().


<!DOCTYPE html>
<html>
<body>
<input type="range" id="myRange" value="90">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!-- w w w  .  j  a  va  2 s  .  c  o m-->
    var x = document.getElementById("myRange").value;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create an <input> element with type="range" by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<!--  w w w  .  ja  va 2s .  c  om-->
<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "range");
    document.body.appendChild(x);
}
</script>

</body>
</html>

The code above is rendered as follows:

Input Range Object Properties

Property	Description
autocomplete	Sets or gets the autocomplete attribute of a slider control
autofocus	Sets or gets whether a slider control can auto focus when the page loads
defaultValue	Sets or gets the default value of a slider control
disabled	Disable or enable a slider control
form	Get the form that contains the slider control
list	Get the datalist that contains the slider control
max	Sets or gets the max attribute of the slider control
min	Sets or gets the min attribute of the slider control
name	Sets or gets the name attribute of a slider control
step	Sets or gets the step attribute of the slider control
type	Get the type of the slider control
value	Sets or gets the value attribute of a slider control

Standard Properties and Events

The Input Range object supports the standard properties and events.