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 object
The HTML DOM Input Range object represents an <input> element with type="range". This object provides methods and properties to manipulate range slider controls through JavaScript. We can create a new range input using createElement() or access an existing one using getElementById().
Syntax
Creating a new input range element −
var rangeElement = document.createElement("INPUT");
rangeElement.setAttribute("type", "range");
Accessing an existing input range element −
var rangeElement = document.getElementById("myRange");
HTML syntax for range input −
<input type="range" id="myRange" min="0" max="100" value="50">
Properties
Following are the properties for the Input Range object −
| Sr.No | Property & Description |
|---|---|
| 1 |
autocomplete Sets or returns the autocomplete attribute value of the range control. |
| 2 |
autofocus Sets or returns whether the range slider should automatically get focus when the page loads. |
| 3 |
defaultValue Sets or returns the default value of the range slider control. |
| 4 |
disabled Sets or returns whether the slider control is disabled. |
| 5 |
form Returns a reference to the form containing the slider control. |
| 6 |
list Returns a reference to the datalist containing the slider control. |
| 7 |
max Sets or returns the max attribute value of the slider control. |
| 8 |
min Sets or returns the min attribute value of the slider control. |
| 9 |
name Sets or returns the name attribute value of the slider control. |
| 10 |
step Sets or returns the step attribute value of the slider control. |
| 11 |
type Returns the form element type for the slider control. |
| 12 |
value Sets or returns the current value of the slider control. |
Methods
Following are the methods for the Input Range object −
| Sr.No | Method & Description |
|---|---|
| 1 |
stepDown() Decrements the slider control value by a specified number of steps. |
| 2 |
stepUp() Increments the slider control value by a specified number of steps. |
Creating Range Input Dynamically
Following example demonstrates creating a range input element dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Range Object - Create</title>
<script>
function rangeCreate() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
R.setAttribute("min", "0");
R.setAttribute("max", "100");
R.setAttribute("value", "50");
R.setAttribute("id", "volumeSlider");
document.getElementById("container").appendChild(R);
}
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Input Range Object</h1>
<p>Create a volume range slider by clicking the button below</p>
<button onclick="rangeCreate()">CREATE RANGE</button>
<br><br>
<label>VOLUME: </label>
<div id="container"></div>
</body>
</html>
The output shows a button that creates a range slider when clicked −
Input Range Object Create a volume range slider by clicking the button below [CREATE RANGE] VOLUME: [Range slider appears after clicking button]
Accessing Range Properties
Following example shows how to access and modify properties of an existing range input −
<!DOCTYPE html>
<html>
<head>
<title>Range Properties Access</title>
<script>
function showProperties() {
var range = document.getElementById("myRange");
var output = "Value: " + range.value + "<br>";
output += "Min: " + range.min + "<br>";
output += "Max: " + range.max + "<br>";
output += "Step: " + range.step;
document.getElementById("info").innerHTML = output;
}
function changeRange() {
var range = document.getElementById("myRange");
range.min = "10";
range.max = "90";
range.step = "5";
range.value = "50";
}
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Range Slider Properties</h2>
<label for="myRange">Volume: </label>
<input type="range" id="myRange" min="0" max="100" value="25" step="1">
<br><br>
<button onclick="showProperties()">Show Properties</button>
<button onclick="changeRange()">Change Range</button>
<br><br>
<div id="info"></div>
</body>
</html>
The output displays the range slider with buttons to show and modify its properties −
Range Slider Properties Volume: [----?---] [Show Properties] [Change Range] (After clicking "Show Properties"): Value: 25 Min: 0 Max: 100 Step: 1
Using stepUp() and stepDown() Methods
Following example demonstrates the stepUp() and stepDown() methods −
<!DOCTYPE html>
<html>
<head>
<title>Range Step Methods</title>
<script>
function stepUpRange() {
var range = document.getElementById("stepRange");
range.stepUp(5);
updateDisplay();
}
function stepDownRange() {
var range = document.getElementById("stepRange");
range.stepDown(5);
updateDisplay();
}
function updateDisplay() {
var range = document.getElementById("stepRange");
document.getElementById("currentValue").innerHTML = "Current Value: " + range.value;
}
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;" onload="updateDisplay()">
<h2>Range Step Methods</h2>
<label for="stepRange">Temperature: </label>
<input type="range" id="stepRange" min="0" max="100" value="50" step="5" oninput="updateDisplay()">
<br><br>
<button onclick="stepDownRange()">Step Down (-5)</button>
<button onclick="stepUpRange()">Step Up (+5)</button>
<br><br>
<div id="currentValue"></div>
</body>
</html>
The output shows a range slider with buttons to step up or down by 5 units −
Range Step Methods Temperature: [-----?-----] [Step Down (-5)] [Step Up (+5)] Current Value: 50
Conclusion
The HTML DOM Input Range object provides comprehensive control over range slider elements through JavaScript. Its properties allow you to configure the slider's behavior, limits, and current value, while methods like stepUp() and stepDown() enable programmatic value manipulation. This makes range inputs highly interactive and suitable for volume controls, settings adjustments, and data input scenarios.
279 Views
