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 value property
The HTML DOM Input Range value property is associated with input elements having type="range". It returns or sets the current value of the range slider control. The value can be the default value specified in HTML or a value set by the user dragging the slider.
Syntax
Following is the syntax for getting the value property −
var value = rangeObject.value;
Following is the syntax for setting the value property −
rangeObject.value = number;
Here, number is a numeric value within the range defined by the min and max attributes of the input element.
Parameters
The value property accepts the following parameter −
number − A numeric string representing the slider's position. The value must be between the
minandmaxattributes (default range is 0 to 100).
Return Value
The value property returns a string representing the current numeric value of the range slider.
Getting Range Value
Following example demonstrates how to get the current value of a range input −
<!DOCTYPE html>
<html>
<head>
<title>Getting Range Value</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="volumeDisplay">50</span>
</form>
<p>
<button onclick="getValue()">Get Current Value</button>
</p>
<p id="result"></p>
<script>
function getValue() {
var currentValue = document.getElementById("volume").value;
document.getElementById("result").innerHTML = "Current volume level: " + currentValue;
}
// Update display in real-time
document.getElementById("volume").addEventListener("input", function() {
document.getElementById("volumeDisplay").textContent = this.value;
});
</script>
</body>
</html>
The output shows a volume slider with real-time value updates −
Volume Control Volume: [====|====] 50 [Get Current Value] (Moving slider updates the display dynamically) Current volume level: 75 (when slider is moved)
Setting Range Value
Following example demonstrates how to programmatically set the range value −
<!DOCTYPE html>
<html>
<head>
<title>Setting Range Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Brightness Control</h2>
<label for="brightness">Brightness:</label>
<input type="range" id="brightness" min="10" max="100" value="50">
<span id="brightnessValue">50%</span>
<p>Preset Values:</p>
<button onclick="setBrightness(25)">Low (25%)</button>
<button onclick="setBrightness(50)">Medium (50%)</button>
<button onclick="setBrightness(75)">High (75%)</button>
<button onclick="setBrightness(100)">Max (100%)</button>
<script>
function setBrightness(value) {
var slider = document.getElementById("brightness");
slider.value = value;
document.getElementById("brightnessValue").textContent = value + "%";
}
// Update display when slider is manually moved
document.getElementById("brightness").addEventListener("input", function() {
document.getElementById("brightnessValue").textContent = this.value + "%";
});
</script>
</body>
</html>
The output displays preset buttons that programmatically set the slider value −
Brightness Control Brightness: [=====|===] 50% Preset Values: [Low (25%)] [Medium (50%)] [High (75%)] [Max (100%)] (Clicking buttons moves slider to corresponding positions)
Range with Custom Attributes
Following example shows a range input with custom min, max, and step values −
<!DOCTYPE html>
<html>
<head>
<title>Custom Range Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Temperature Control</h2>
<label for="temperature">Temperature (°C):</label>
<input type="range" id="temperature" min="-10" max="40" step="2" value="20">
<span id="tempDisplay">20°C</span>
<p>
<button onclick="showRangeInfo()">Show Range Info</button>
</p>
<p id="info"></p>
<script>
function showRangeInfo() {
var temp = document.getElementById("temperature");
var info = "Current: " + temp.value + "°C, " +
"Min: " + temp.min + "°C, " +
"Max: " + temp.max + "°C, " +
"Step: " + temp.step + "°C";
document.getElementById("info").innerHTML = info;
}
document.getElementById("temperature").addEventListener("input", function() {
document.getElementById("tempDisplay").textContent = this.value + "°C";
});
</script>
</body>
</html>
The output demonstrates a temperature slider with custom range and step values −
Temperature Control Temperature (°C): [======|====] 20°C [Show Range Info] Current: 22°C, Min: -10°C, Max: 40°C, Step: 2°C
Key Points
The
valueproperty always returns a string, even though it represents a numeric value.Default range is 0 to 100 if
minandmaxare not specified.The
inputevent fires continuously while dragging the slider, whilechangefires only when the user finishes dragging.Setting a value outside the min-max range automatically clamps it to the nearest valid value.
Browser Compatibility
The HTML5 range input and its value property are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+.
Conclusion
The HTML DOM Input Range value property provides an easy way to get or set the current position of a range slider. It works seamlessly with the min, max, and step attributes to create intuitive numeric input controls. Use event listeners like input or change to respond to user interactions with the slider.
1K+ Views
