HTML DOM Input Range stepUp() method

HTML Web Development Front End Technology

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 −

Live Demo

<!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);
}

AmitDiwan

Updated on: 22-Aug-2019

65 Views

Kickstart Your Career

Get certified by completing the course

Get Started