- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Input Range stepDown() method
The HTML DOM Input Range stepDown() method is used for decrementing the slider control value by a specified number. If left blank then it will decrement by 1. If the step attribute is specified then the stepdown() method will decrement in multiple of that. Eg: If step=”20” then stepDown(2) will decrement by 20*2=40
Syntax
Following is the syntax for Range stepDown() method −
rangeObject.stepDown(number)
Here, number is a mandatory parameter for specifying the slider control decrement value. If left blank it will decrement by 1.
Example
Let us look at an example for the range stepDown() method −
<!DOCTYPE html>
<html>
<body>
<h1>Input range stepDown() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Decrement the slider control value by clicking the below button</p>
<button type="button" onclick="stepDecrement()">DECREMENT</button>
<p id="Sample"></p>
<script>
function stepDecrement() {
document.getElementById("RANGE1").stepDown(10);
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the DECREMENT 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 DECREMENT that will execute the stepDecrement() method when clicked by the user −
<button type="button" onclick="stepDecrement()">DECREMENT</button>
The stepDecrement() method uses the getElementById() method to get the input field with type range by passing the id “RANGE1” to it and calls the stepDown() method on it with 10 supplied as decrement value. This will decrement the slider by 10 −
function stepDecrement() {
document.getElementById("RANGE1").stepDown(10);
}
- Related Articles
- HTML DOM Input Month stepDown() Method
- HTML DOM Input Number stepDown() Method
- HTML DOM Input Date stepDown() Method
- HTML DOM Input DatetimeLocal stepDown( ) Method
- HTML DOM Input Time stepDown( ) Method
- HTML DOM Input Week stepDown( ) Method
- HTML DOM Input Range stepUp() method
- HTML DOM Input Range object
- HTML DOM Input Range autofocus property
- HTML DOM Input Range disabled property
- HTML DOM Input Range form property
- HTML DOM Input Range max property
- HTML DOM Input Range min property
- HTML DOM Input Range name property
- HTML DOM Input Range step property
