Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 is used for indicating the minimum value of the slider control and is often used with min 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
Here, number represents minimum slider control value.
Example
Let us look at an example for the Input range min property −
<!DOCTYPE html>
<html>
<body>
<h1>Range min property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL" min="15">
</form>
<p>Get the minimum value for the above slider by clicking the below button.</p>
<button type="button" onclick="minVal()">GET MIN</button>
<p id="Sample"> </p>
<script>
function minVal() {
var R=document.getElementById("RANGE1").min;
document.getElementById("Sample").innerHTML = "The minimum value for this range slider is "+R;
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the GET MIN button −
In the above example −
We have created an input field contained inside a form having type=“range”, id=“RANGE1”, name=“VOL” and min attribute value set to 15 −
<form> VOLUME <input type="range" id="RANGE1" name="VOL" min="15"> <form>
We have then created a button GET MIN that will execute the minVal() method when clicked by the user −
<button type="button" onclick="minVal()">GET MIN</button>
The minVal() method uses the getElementById() method to get the input field with type range and get its min attribute value. The returned value which signifies the minimum value the slider can have is then assigned to variable R. This value is then displayed in the paragraph with id “Sample” using its innerHTML property −
function minVal() {
var R= document.getElementById("RANGE1").min;
document.getElementById("Sample").innerHTML = "The minimum value for this range slider is "+R;
}
73 Views
To Continue Learning Please Login