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

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

step property (input:range)

Browser support:

Sets the discrete step size of the input:range element.

Use it together with the max and min properties.

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

Syntax:

object.step;

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

This property is read/write.

HTML page for this property: step

Possible values:

String that sets or retrieves the value as an Integer, the difference between two neighbor values.

Default: 1.

Example HTML code 1:

This example illustrates the use of the step attribute:

Step size is 10:
<input type="range" step="10" min="0" max="100" />
<br /><br /><br />
Step size is 20:
<input type="range" step="20" min="0" max="100" />

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the min property:

<head>
    <script type="text/javascript">
        function ChangeStep () {
            var input = document.getElementById ("mySlider");
            if ('step' in input) {  // Google Chrome, Safari from version 5 and Opera
                input.step = 10;
            }
            else {
                    // Safari before version 5
                input.setAttribute ("step", 10);
            }
        }
    </script>
</head>
<body>
    Step size is 50:
    <input type="range" id="mySlider" min="0" max="100" step="50" />
    <br /><br /><br />
    <button onclick="ChangeStep ();">Change step size to 10</button>
</body>