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 step property
The HTML DOM Input Range step property is used to set or return the step attribute value of a range slider control. It specifies the increment value for each movement of the slider. By combining the step property with min and max attributes, you can define precise intervals for legal values within the range.
Syntax
Following is the syntax for setting the step property −
rangeObject.step = number
Following is the syntax for returning the step property −
rangeObject.step
Parameters
The step property accepts the following parameter −
number − A positive number that specifies the slider control movement size. The default value is 1. You can use decimal values like 0.5 or 0.1 for finer control.
Return Value
The step property returns a string representing the current step value of the range input element.
Setting the Step Property
Example
Following example demonstrates how to change the step property of a range slider −
<!DOCTYPE html>
<html>
<head>
<title>Input Range Step Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Volume Control</h2>
<form>
<label for="RANGE1">VOLUME:</label>
<input type="range" id="RANGE1" name="VOL" min="0" max="100" value="50">
<span id="currentValue">50</span>
</form>
<p>Change the step property value by clicking the button below:</p>
<button type="button" onclick="changeStep()">Set Step to 10</button>
<button type="button" onclick="resetStep()">Reset Step to 1</button>
<p id="Sample"></p>
<script>
function changeStep() {
var rangeInput = document.getElementById("RANGE1");
rangeInput.step = "10";
document.getElementById("Sample").innerHTML = "The step attribute value is now 10. The slider moves in increments of 10.";
}
function resetStep() {
var rangeInput = document.getElementById("RANGE1");
rangeInput.step = "1";
document.getElementById("Sample").innerHTML = "The step attribute value is reset to 1.";
}
// Update display value when slider moves
document.getElementById("RANGE1").oninput = function() {
document.getElementById("currentValue").innerHTML = this.value;
}
</script>
</body>
</html>
The output shows a volume slider that initially moves in steps of 1. After clicking "Set Step to 10", the slider moves in increments of 10 −
Volume Control VOLUME: [????????????????????????????????????] 50 Change the step property value by clicking the button below: [Set Step to 10] [Reset Step to 1] (After clicking "Set Step to 10") The step attribute value is now 10. The slider moves in increments of 10.
Getting the Step Property
Example
Following example shows how to retrieve the current step value of a range input −
<!DOCTYPE html>
<html>
<head>
<title>Get Step Property Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Range Slider Properties</h2>
<label for="priceRange">Price Range ($):</label>
<input type="range" id="priceRange" min="0" max="1000" step="25" value="500">
<span id="priceValue">$500</span>
<br><br>
<button onclick="getStepValue()">Get Step Value</button>
<button onclick="setStepValue()">Set Step to 50</button>
<p id="result"></p>
<script>
function getStepValue() {
var rangeInput = document.getElementById("priceRange");
var stepValue = rangeInput.step;
document.getElementById("result").innerHTML = "Current step value: " + stepValue;
}
function setStepValue() {
var rangeInput = document.getElementById("priceRange");
rangeInput.step = "50";
document.getElementById("result").innerHTML = "Step value changed to: " + rangeInput.step;
}
// Update price display
document.getElementById("priceRange").oninput = function() {
document.getElementById("priceValue").innerHTML = "$" + this.value;
}
</script>
</body>
</html>
The output displays the current step value when the "Get Step Value" button is clicked −
Range Slider Properties Price Range ($): [????????????????????????????????????] $500 [Get Step Value] [Set Step to 50] (After clicking "Get Step Value") Current step value: 25
Using Decimal Step Values
Example
Following example demonstrates using decimal step values for precise control −
<!DOCTYPE html>
<html>
<head>
<title>Decimal Step Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Temperature Control</h2>
<label for="tempRange">Temperature (°C):</label>
<input type="range" id="tempRange" min="15.0" max="30.0" step="0.5" value="22.5">
<span id="tempValue">22.5°C</span>
<br><br>
<button onclick="setFineStep()">Set Step to 0.1</button>
<button onclick="setCoarseStep()">Set Step to 1.0</button>
<p id="stepInfo">Current step: 0.5</p>
<script>
function setFineStep() {
var rangeInput = document.getElementById("tempRange");
rangeInput.step = "0.1";
document.getElementById("stepInfo").innerHTML = "Current step: 0.1 (Fine control)";
}
function setCoarseStep() {
var rangeInput = document.getElementById("tempRange");
rangeInput.step = "1.0";
document.getElementById("stepInfo").innerHTML = "Current step: 1.0 (Coarse control)";
}
// Update temperature display
document.getElementById("tempRange").oninput = function() {
document.getElementById("tempValue").innerHTML = this.value + "°C";
}
</script>
</body>
</html>
This example shows how decimal step values like 0.5 and 0.1 provide fine-grained control over the slider movement.
Key Points
The step property determines the increment size for each slider movement.
Default step value is 1 if not specified.
Decimal values like 0.1 or 0.5 are allowed for fine-grained control.
The number of possible slider positions equals
(max - min) / step + 1.Setting a larger step value reduces the number of possible slider positions.
The step property accepts both integer and floating-point numbers as strings.
Conclusion
The HTML DOM Input Range step property provides precise control over slider movement increments. By adjusting the step value, you can create sliders that move in large jumps for coarse control or small increments for fine-tuned precision. This property is essential for creating user-friendly range controls that match your application's specific requirements.
210 Views
