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

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

max property (input:range)

Browser support:

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

Use it together with the min and step properties.

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

Syntax:

object.max;

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

This property is read/write.

HTML page for this property: max

Possible values:

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

Default: 100.

Example HTML code 1:

This example illustrates the use of the max 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 max property:

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

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

            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="SetMax ();">Set max to 500!</button>
</body>