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 min property
The HTML DOM Input Range min property is used for setting or returning the min attribute value for the range slider control. This attribute indicates the minimum value of the slider control and is often used with the max property to create a range of values between which the slider can move.
Syntax
Following is the syntax for setting the Range min property −
rangeObject.min = number
Following is the syntax for getting the Range min property −
var minValue = rangeObject.min
Parameters
The min property accepts the following parameter −
- number − A numeric value representing the minimum value for the range slider. Default value is 0.
Return Value
The min property returns a string representing the minimum value of the range input element.
Getting the Min Value
Following example demonstrates how to get the minimum value from a range input element −
<!DOCTYPE html>
<html>
<head>
<title>Range Min Property - Get Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Range Min Property Example</h2>
<form>
<label for="RANGE1">VOLUME:</label>
<input type="range" id="RANGE1" name="VOL" min="15" max="100" value="50">
</form>
<p>Get the minimum value for the above slider by clicking the below button.</p>
<button type="button" onclick="getMinValue()">GET MIN</button>
<p id="result"></p>
<script>
function getMinValue() {
var minVal = document.getElementById("RANGE1").min;
document.getElementById("result").innerHTML = "The minimum value for this range slider is " + minVal;
}
</script>
</body>
</html>
The output displays a range slider with minimum value 15. Clicking "GET MIN" shows the minimum value −
Range Min Property Example VOLUME: [slider from 15 to 100] Get the minimum value for the above slider by clicking the below button. [GET MIN] (After clicking: The minimum value for this range slider is 15)
Setting the Min Value
Following example shows how to dynamically set the minimum value of a range input element −
<!DOCTYPE html>
<html>
<head>
<title>Range Min Property - Set Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Setting Range Min Property</h2>
<form>
<label for="priceRange">Price Range:</label>
<input type="range" id="priceRange" name="price" min="0" max="1000" value="500">
<span id="currentValue">500</span>
</form>
<p>Change the minimum value:</p>
<button type="button" onclick="setMin(10)">Set Min to 10</button>
<button type="button" onclick="setMin(50)">Set Min to 50</button>
<button type="button" onclick="showCurrentMin()">Show Current Min</button>
<p id="output"></p>
<script>
function setMin(newMin) {
var range = document.getElementById("priceRange");
range.min = newMin;
document.getElementById("output").innerHTML = "Minimum value set to: " + newMin;
// Adjust current value if it's below new minimum
if (parseInt(range.value) < newMin) {
range.value = newMin;
document.getElementById("currentValue").innerHTML = newMin;
}
}
function showCurrentMin() {
var currentMin = document.getElementById("priceRange").min;
document.getElementById("output").innerHTML = "Current minimum value is: " + currentMin;
}
// Update display when slider moves
document.getElementById("priceRange").oninput = function() {
document.getElementById("currentValue").innerHTML = this.value;
}
</script>
</body>
</html>
This example allows you to dynamically change the minimum value of the range slider. If the current value is below the new minimum, it automatically adjusts to the minimum.
Practical Use Case
Following example demonstrates a practical scenario where the min property is used for a product filter −
<!DOCTYPE html>
<html>
<head>
<title>Product Price Filter</title>
<style>
.filter-container { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
.price-display { font-weight: bold; color: #333; margin: 10px 0; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Product Price Filter</h2>
<div class="filter-container">
<h3>Filter by Price Range</h3>
<label for="minPrice">Minimum Price: $</label>
<input type="range" id="minPrice" min="0" max="500" value="50" step="10">
<span id="minDisplay">50</span>
<br><br>
<label for="maxPrice">Maximum Price: $</label>
<input type="range" id="maxPrice" min="50" max="1000" value="200" step="10">
<span id="maxDisplay">200</span>
<div class="price-display" id="priceRange">Price Range: $50 - $200</div>
</div>
<script>
function updatePriceRange() {
var minPrice = document.getElementById("minPrice");
var maxPrice = document.getElementById("maxPrice");
var minVal = parseInt(minPrice.value);
var maxVal = parseInt(maxPrice.value);
// Ensure min is not greater than max
if (minVal >= maxVal) {
maxPrice.value = minVal + 10;
maxVal = minVal + 10;
}
// Update max slider's minimum to current min value
maxPrice.min = minVal;
document.getElementById("minDisplay").innerHTML = minVal;
document.getElementById("maxDisplay").innerHTML = maxVal;
document.getElementById("priceRange").innerHTML = "Price Range: $" + minVal + " - $" + maxVal;
}
document.getElementById("minPrice").oninput = updatePriceRange;
document.getElementById("maxPrice").oninput = updatePriceRange;
</script>
</body>
</html>
This creates an interactive price filter where the maximum price slider's minimum value dynamically updates based on the minimum price slider, ensuring a valid price range.
Key Points
Here are the important points to remember about the Range input min property −
- The min property sets or returns the minimum value allowed for a range input element.
- The default minimum value is 0 if not specified.
- The property returns a string value, even though it represents a number.
- When setting a new minimum value, ensure the current value is not below the new minimum.
- The min property works together with the max property to define the acceptable range.
- If the current value is less than the new minimum, browsers may automatically adjust it.
Conclusion
The HTML DOM Input Range min property provides control over the minimum value of range sliders. It can be both retrieved and modified dynamically using JavaScript, making it useful for creating interactive controls like price filters, volume controls, and rating systems. Always ensure the minimum value is less than the maximum value to maintain a valid range.
214 Views
