Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Range stepDown() method
The HTML DOM Input Range stepDown() method is used to decrement the value of a range slider by a specified amount. If no parameter is provided, it decrements by 1. When the step attribute is defined on the range input, the stepDown() method decrements in multiples of that step value.
Syntax
Following is the syntax for the Range stepDown() method −
rangeObject.stepDown(number)
Parameters
The method accepts the following parameter −
number − An optional numeric parameter specifying how many steps to decrement. If omitted, defaults to 1.
How It Works
The stepDown() method decrements the range input's value based on the following calculation −
If no
stepattribute is set, each step equals 1.If
step="20"is set, thenstepDown(2)decrements by 20 × 2 = 40.The new value cannot go below the
minattribute value.
Basic Example
Following example demonstrates the basic usage of the stepDown() method −
<!DOCTYPE html>
<html>
<head>
<title>Range stepDown() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Volume Control</h2>
<form>
<label for="volume">VOLUME: </label>
<input type="range" id="volume" name="VOL" min="0" max="100" value="50">
<span id="display">50</span>
</form>
<br>
<button type="button" onclick="stepDecrement()">Decrease by 10</button>
<button type="button" onclick="showValue()">Show Value</button>
<script>
function stepDecrement() {
var range = document.getElementById("volume");
range.stepDown(10);
document.getElementById("display").textContent = range.value;
}
function showValue() {
var value = document.getElementById("volume").value;
alert("Current value: " + value);
}
</script>
</body>
</html>
The slider starts at 50. Clicking "Decrease by 10" reduces the value by 10 each time, and the display updates to show the current value.
Initial: Volume slider at 50 After one click: Volume slider at 40 After two clicks: Volume slider at 30
Using stepDown() with Custom Step Values
Following example shows how stepDown() works with custom step attributes −
<!DOCTYPE html>
<html>
<head>
<title>stepDown() with Custom Steps</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Temperature Control</h2>
<p>Step size: 5 degrees</p>
<label for="temp">Temperature: </label>
<input type="range" id="temp" min="0" max="100" step="5" value="75">
<span id="tempValue">75°C</span>
<br><br>
<button onclick="decreaseTemp(1)">-1 Step (5°)</button>
<button onclick="decreaseTemp(3)">-3 Steps (15°)</button>
<button onclick="resetTemp()">Reset to 75°</button>
<script>
function decreaseTemp(steps) {
var tempRange = document.getElementById("temp");
tempRange.stepDown(steps);
document.getElementById("tempValue").textContent = tempRange.value + "°C";
}
function resetTemp() {
var tempRange = document.getElementById("temp");
tempRange.value = 75;
document.getElementById("tempValue").textContent = "75°C";
}
</script>
</body>
</html>
With step="5", clicking "-1 Step" decreases by 5°, and "-3 Steps" decreases by 15°. The method respects the step attribute automatically.
Initial: 75°C After "-1 Step": 70°C After "-3 Steps": 55°C
stepDown() with Min/Max Boundaries
Following example demonstrates how stepDown() respects the minimum value boundary −
<!DOCTYPE html>
<html>
<head>
<title>stepDown() with Boundaries</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Score Counter (Min: 10, Max: 100)</h2>
<label for="score">Score: </label>
<input type="range" id="score" min="10" max="100" value="25">
<span id="scoreDisplay">25</span>
<br><br>
<button onclick="decreaseScore()">Decrease by 5</button>
<button onclick="decreaseLarge()">Decrease by 50</button>
<p id="message"></p>
<script>
function decreaseScore() {
var scoreRange = document.getElementById("score");
var oldValue = scoreRange.value;
scoreRange.stepDown(5);
var newValue = scoreRange.value;
document.getElementById("scoreDisplay").textContent = newValue;
if (newValue == oldValue) {
document.getElementById("message").textContent = "Cannot go below minimum value of 10";
} else {
document.getElementById("message").textContent = "Decreased from " + oldValue + " to " + newValue;
}
}
function decreaseLarge() {
var scoreRange = document.getElementById("score");
var oldValue = scoreRange.value;
scoreRange.stepDown(50);
var newValue = scoreRange.value;
document.getElementById("scoreDisplay").textContent = newValue;
document.getElementById("message").textContent = "Tried to decrease by 50, but stopped at minimum: " + newValue;
}
</script>
</body>
</html>
The method automatically stops at the minimum value (10) and won't decrement below it, even if the requested decrement would normally go lower.
Initial: Score 25 After "Decrease by 5": Score 20, message shows "Decreased from 25 to 20" After clicking again: Score 15, then Score 10 (stops at minimum)
Key Points
The stepDown() method decrements the range input value by the specified number of steps.
If no parameter is provided, it decrements by 1 step.
The actual decrement amount is calculated as: parameter × step attribute value.
The method will not allow the value to go below the
minattribute.This method only works on
<input type="range">and<input type="number">elements.
Conclusion
The stepDown() method provides a programmatic way to decrease range input values while respecting the element's step, min, and max constraints. It's particularly useful for creating custom controls and ensuring consistent step-based value changes in web applications.
178 Views
