The HTML DOM Input Range stepUp() method is used for incrementing the slider control value by a specified number. If left blank then it will increment by 1.If the step attribute is specified then the stepUp() method will increment in multiple of that. Eg: If step=”20” then stepUp(2) will increment by 20*2=40
Syntax
Following is the syntax for Range stepUp() method −
rangeObject.stepUp(number)
Here, number is a mandatory parameter for specifying the the slider control increment value. If left blank it will increment by 1.
Example
Let us look at an example for the range stepUp() method −
<!DOCTYPE html>
<html>
<body>
<h1>Input range stepUp() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Increment the slider control value by clicking the below button</p>
<button type="button" onclick="stepIncrement()">INCREMENT</button>
<p id="Sample"></p>
<script>
function stepIncrement() {
document.getElementById("RANGE1").stepUp(10);
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the INCREMENT button −
In the above example −
We have created an input field contained inside a form having type=“range, id=“RANGE1” , name=“VOL” −
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
We have then created a button INCREMENT that will execute the stepIncrement() method on being clicked by the user −
<button type="button" onclick="stepIncrement()">INCREMENT</button>
The stepIncrement() method uses the getElementById() method to get the input field with type range by passing the id “RANGE1” to it and calls the stepUp() method on it with 10 supplied as increment value. This will increment the slider by 10 −
function stepIncrement() {
document.getElementById("RANGE1").stepUp(10);
}