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 max property
The HTML DOM Input Range max property is used for setting or returning the max attribute value for the range slider control. This attribute indicates the maximum value of the slider control and is often used with the min property to create a range of values between which the slider can move.
Syntax
Following is the syntax for setting the Range max property −
rangeObject.max = number
Following is the syntax for returning the Range max property −
var maxValue = rangeObject.max
Here, number represents the maximum slider control value, and maxValue stores the returned maximum value.
Parameters
The max property accepts the following parameter −
number − A numeric value specifying the maximum value for the range input. This should be greater than the min value.
Return Value
The max property returns a string representing the maximum value of the range input element.
Getting the Max Property
Example
Let us look at an example for getting the Input range max property −
<!DOCTYPE html>
<html>
<head>
<title>Range max Property - Get</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Range max property</h2>
<form>
<label for="RANGE1">VOLUME: </label>
<input type="range" id="RANGE1" name="VOL" min="0" max="75" value="25">
<span id="rangeValue">25</span>
</form>
<p>Get the maximum value for the above slider by clicking the below button.</p>
<button type="button" onclick="getMax()">GET MAX</button>
<p id="result"></p>
<script>
function getMax() {
var maxVal = document.getElementById("RANGE1").max;
document.getElementById("result").innerHTML = "The maximum value for this range slider is " + maxVal;
}
// Update display value when slider moves
document.getElementById("RANGE1").oninput = function() {
document.getElementById("rangeValue").innerHTML = this.value;
}
</script>
</body>
</html>
The output displays a volume slider with a maximum value of 75, and clicking "GET MAX" shows this maximum value −
VOLUME: [slider] 25 Get the maximum value for the above slider by clicking the below button. [GET MAX] (After clicking: The maximum value for this range slider is 75)
Setting the Max Property
Example
Following example demonstrates how to set the max property dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Range max Property - Set</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Set Range max property</h2>
<form>
<label for="RANGE2">BRIGHTNESS: </label>
<input type="range" id="RANGE2" name="BRIGHTNESS" min="0" max="50" value="25">
<span id="brightnessValue">25</span>
</form>
<p>Current max value: <span id="currentMax">50</span></p>
<button type="button" onclick="setMax(100)">Set Max to 100</button>
<button type="button" onclick="setMax(200)">Set Max to 200</button>
<p id="message"></p>
<script>
function setMax(newMax) {
var rangeInput = document.getElementById("RANGE2");
rangeInput.max = newMax;
document.getElementById("currentMax").innerHTML = newMax;
document.getElementById("message").innerHTML = "Maximum value changed to " + newMax;
}
// Update display value when slider moves
document.getElementById("RANGE2").oninput = function() {
document.getElementById("brightnessValue").innerHTML = this.value;
}
</script>
</body>
</html>
The output shows a brightness slider where you can dynamically change the maximum value −
BRIGHTNESS: [slider] 25 Current max value: 50 [Set Max to 100] [Set Max to 200] (After clicking: Maximum value changed to 100/200)
Practical Use Case
Example − Audio Player Volume Control
Following example shows a practical implementation using the max property for an audio volume control −
<!DOCTYPE html>
<html>
<head>
<title>Audio Volume Control</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Player Volume Control</h2>
<div style="background: #f5f5f5; padding: 15px; border-radius: 8px; width: 300px;">
<label for="volumeSlider">Volume: </label>
<input type="range" id="volumeSlider" min="0" max="100" value="50">
<span id="volumePercent">50%</span><br><br>
<button onclick="setMaxVolume(80)">Limit to 80%</button>
<button onclick="setMaxVolume(100)">Full Range</button><br><br>
<p>Max Volume: <span id="maxDisplay">100</span>%</p>
</div>
<script>
var volumeSlider = document.getElementById("volumeSlider");
volumeSlider.oninput = function() {
document.getElementById("volumePercent").innerHTML = this.value + "%";
}
function setMaxVolume(maxVol) {
volumeSlider.max = maxVol;
document.getElementById("maxDisplay").innerHTML = maxVol;
// Adjust current value if it exceeds new max
if (parseInt(volumeSlider.value) > maxVol) {
volumeSlider.value = maxVol;
document.getElementById("volumePercent").innerHTML = maxVol + "%";
}
}
</script>
</body>
</html>
This creates an audio volume control where you can limit the maximum volume for safety, automatically adjusting the current value if needed.
Key Points
The
maxproperty defines the upper limit of the range slider.When setting the max property, ensure it is greater than the
minvalue.If the current value exceeds the new maximum, you should programmatically adjust it.
The max property returns a string value, even though it represents a number.
This property is commonly used in audio/video controls, progress indicators, and user preference settings.
Conclusion
The HTML DOM Input Range max property provides control over the upper boundary of range sliders. It can be both retrieved and modified dynamically, making it essential for creating responsive user interfaces with adjustable limits. Always ensure the max value is greater than the min value for proper slider functionality.
242 Views
