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 stepUp() method
The HTML DOM Input Range stepUp() method is used for incrementing the slider control value by a specified number. If no parameter is provided, it will increment by 1. If the step attribute is specified on the range input, the stepUp() method will increment in multiples of that step value. For example, if step="20" then stepUp(2) will increment by 20 × 2 = 40.
Syntax
Following is the syntax for the Range stepUp() method −
rangeObject.stepUp(number)
Parameters
number − An optional parameter that specifies the increment value for the slider control. If omitted, the method increments by 1.
Return Value
This method does not return any value. It directly modifies the value of the range input element.
Basic stepUp() Example
Following example demonstrates the basic usage of the stepUp() method −
<!DOCTYPE html>
<html>
<head>
<title>Range stepUp() 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>
<p>Increment the slider control value by clicking the button below:</p>
<button type="button" onclick="stepIncrement()">INCREMENT BY 10</button>
<button type="button" onclick="stepIncrementOne()">INCREMENT BY 1</button>
<script>
function stepIncrement() {
var slider = document.getElementById("volume");
slider.stepUp(10);
document.getElementById("display").textContent = slider.value;
}
function stepIncrementOne() {
var slider = document.getElementById("volume");
slider.stepUp(); // Increments by 1 when no parameter
document.getElementById("display").textContent = slider.value;
}
</script>
</body>
</html>
The output shows a volume slider that starts at 50. Clicking "INCREMENT BY 10" increases the value by 10, and "INCREMENT BY 1" increases by 1 −
Volume Control VOLUME: [========|====] 50 INCREMENT BY 10 INCREMENT BY 1 (Clicking INCREMENT BY 10 changes display to 60, 70, 80, etc.) (Clicking INCREMENT BY 1 changes display to 51, 52, 53, etc.)
Using stepUp() with Custom Step Attribute
When the range input has a step attribute, the stepUp() method increments in multiples of that step value −
<!DOCTYPE html>
<html>
<head>
<title>stepUp() with Custom Step</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Price Range (Step = 25)</h2>
<form>
<label for="price">PRICE:</label>
<input type="range" id="price" min="0" max="500" value="100" step="25">
<span id="priceDisplay">$100</span>
</form>
<p>With step="25", stepUp(2) will increment by 25 × 2 = 50:</p>
<button type="button" onclick="incrementPrice()">INCREMENT BY 2 STEPS</button>
<button type="button" onclick="resetPrice()">RESET</button>
<script>
function incrementPrice() {
var priceSlider = document.getElementById("price");
priceSlider.stepUp(2); // Increments by 25 * 2 = 50
document.getElementById("priceDisplay").textContent = "$" + priceSlider.value;
}
function resetPrice() {
document.getElementById("price").value = 100;
document.getElementById("priceDisplay").textContent = "$100";
}
</script>
</body>
</html>
With step="25", clicking "INCREMENT BY 2 STEPS" increases the price by 50 (25 × 2) each time −
Price Range (Step = 25) PRICE: [====|====] $100 With step="25", stepUp(2) will increment by 25 × 2 = 50: INCREMENT BY 2 STEPS RESET (Clicking INCREMENT shows: $150, then $200, then $250, etc.)
Handling Range Limits
The stepUp() method respects the max attribute of the range input. If incrementing would exceed the maximum value, the slider stops at the maximum −
<!DOCTYPE html>
<html>
<head>
<title>stepUp() with Limits</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Limited Range (Max = 10)</h2>
<form>
<label for="limited">VALUE:</label>
<input type="range" id="limited" min="0" max="10" value="8">
<span id="limitDisplay">8</span>
</form>
<p>Try to increment beyond the maximum value:</p>
<button type="button" onclick="tryIncrement()">INCREMENT BY 5</button>
<button type="button" onclick="resetLimited()">RESET TO 8</button>
<script>
function tryIncrement() {
var limitedSlider = document.getElementById("limited");
try {
limitedSlider.stepUp(5); // Tries to add 5, but max is 10
document.getElementById("limitDisplay").textContent = limitedSlider.value;
} catch(e) {
alert("Cannot increment beyond maximum value!");
}
}
function resetLimited() {
document.getElementById("limited").value = 8;
document.getElementById("limitDisplay").textContent = "8";
}
</script>
</body>
</html>
Starting at value 8 with max="10", clicking "INCREMENT BY 5" will only increase to 10 (the maximum), not 13 −
Limited Range (Max = 10) VALUE: [========|=] 8 Try to increment beyond the maximum value: INCREMENT BY 5 RESET TO 8 (Clicking INCREMENT shows: 10, and stays at 10 on subsequent clicks)
Conclusion
The stepUp() method provides a programmatic way to increment HTML range input values. It respects the element's step and max attributes, making it useful for creating custom controls and ensuring values stay within defined bounds. When no parameter is provided, it increments by 1, and when combined with a step attribute, it multiplies the parameter by the step value.
182 Views
