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

Front End Technology HTML Web Development

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.

Syntax

<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…

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="https://code.jquery.com/jquery-2.2.3.min.js"></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>