In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > min (input:range)

min property (input:range)

Browser support:

Sets or retrieves the minimum value of a range type input object (slider).

Use it together with the max and step properties.

Note that the browser support of the min property in JavaScript and the browser support of the min attribute in HTML are different. While the min property is supported in Safari only from version 5, the min attribute is also supported in earlier versions.

Syntax:

object.min;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: min

Possible values:

String that sets or retrieves the value as an Integer, the minimum value of the slider.

Default: 0.

Example HTML code 1:

This example illustrates the use of the min attribute:

0<input type="range" min="0" max="100" step="25" />100
<br /><br />
-100<input type="range" min="-100" max="200" step="25" />200

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to display the value of a input:range control:

<head>
    <style>
        .sliderValue {
            margin-left: 20px;
            padding: 3px;
            background-color: #d0d0f0;
            border: 1px solid #808080;
        }
    </style>
    <script type="text/javascript">
        function OnSliderChanged (slider) {
            var sliderValue = document.getElementById (slider.id + "Value");
            sliderValue.innerHTML = slider.value;
        }

        function Init () {
            var slider = document.getElementById ("slider1");
            OnSliderChanged (slider);
            var slider = document.getElementById ("slider2");
            OnSliderChanged (slider);
        }
    </script>
</head>
<body onload="Init ()">
    0<input type="range" id="slider1" min="0" max="100" step="25" onchange="OnSliderChanged (this)" />100
    <span id="slider1Value" class="sliderValue"></span>
    <br /><br /><br />
    -100<input type="range" id="slider2" min="-100" max="100" step="10" onchange="OnSliderChanged (this)" />100
    <span id="slider2Value" class="sliderValue"></span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the min property:

<head>
    <style>
        #sliderValue {
            margin-left: 20px;
            padding: 3px;
            background-color: #d0d0f0;
            border: 1px solid #808080;
        }
    </style>
    <script type="text/javascript">
        function SetMin () {
            var slider = document.getElementById ("mySlider");

            if ('min' in slider) {  // Google Chrome, Safari from version 5 and Opera
                slider.min = -200;
            } 
            else {
                    // Safari before version 5
                slider.setAttribute ("min", -200);
            }

            OnSliderChanged (slider);
        }

        function OnSliderChanged (slider) {
            var sliderValue = document.getElementById ("sliderValue");
            sliderValue.innerHTML = slider.value;
        }
        
        function Init () {
            var slider = document.getElementById ("mySlider");
            OnSliderChanged (slider);
        }
    </script>
</head>
<body onload="Init ()">
    <input type="range" id="mySlider" min="0" max="100" step="25" onchange="OnSliderChanged (this)" />
    <span id="sliderValue"></span>
    <br /><br />
    <button onclick="SetMin ();">Set min to -200!</button>
</body>