JSFiddle - React, Tailwind, and code Playground

by Ali Mamedov

HTML

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

JavaScript

$(function() {

	$('#years').on("input change", function() {

		var
			element = $('#years'),
			value = element.val(),
			step;
			
		/* 
			Map your rules 
		*/
		if (value < 1995) {

			step = 20;
		}
		else {

			step = 1;

		}

		element.attr('step', step);

		$('#value').text(value);
		$('#step').text(step);
	});
});