How to use different step attribute in one range input in HTML?

The permitted number intervals are determined by the HTML input type step property. Steps are numerical steps such as 0, 2, 4, 6, 8, and so on. To construct a range of valid values, combine the step attribute with the max and min properties.

They establish a stepping interval on a range which is executed by moving the slider left to right or spinner up and down. If its not explicitly mentioned, default steps are assigned to various input values.


<input type="type name" step="number">

Default step values for different input values are as follows −

Input Type Value Example
date 1 day <input type="date" min="2019-12-25" step="1">
month 1 month <input type="month" min="2019-12" step="12">
week 1 week <input type="week" min="2019-W23" step="2">
time 60 seconds <input type="time" min="09:00" step="900">
datetime-local 1 second <input type="datetime-local" min="2019-12-25T19:30" step="7">
number 1 <input type="number" min="0" step="0.1" max="10">
range 1 <input type="range" min="0" step="2" max="10">

We will use jQuery to provide different step attribute in one range input in HTML. Following is the example…


In the following example we have created different steps set a currentstep to 20 if the value is <1995 and other step to 1.

<!DOCTYPE html> <html> <head> <script src=""></script> <script> $(function() { $('#years').on('input change', function() { var element = $('#years'), value = element.val(), step; if (value < 1995) { step = 20; } else { step = 1; } element.attr('step', step); $('#value').text(value); $('#step').text(step); }); }); </script> </head> <body> <div> Current value: <span id="value"></span> </div> <div> Current step: <span id="step"></span> </div> <div> <input id="years" type="range" value="1965" min="1965" max="2015" /> </div> </body> </html>

On executing the above script ,It will be separated into two steps. One step is 20; the range is from(1965-1994) and another one is step 1, the range is from (1995-2015).