Teach with us

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 −

 Live Demo

<!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;
}
Updated on 22-Aug-2019 12:14:48

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements