Slider with multiple steps

In this example below you will see how to do a Slider with multiple steps with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jainulhuq, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jainulhuq ©
  • HTML
  • CSS
  • JavaScript
    <div>
	Current value: <span id="value"></span>
</div>
<div>
	Current step: <span id="step"></span>
</div>
<div>
	<input id="student-count" type="range" value="10" min="10" max="2000" style="width:100%;" />
</div>



/*Downloaded from https://www.codeseek.co/jainulhuq/slider-with-multiple-steps-LdWgwL */
    


/*Downloaded from https://www.codeseek.co/jainulhuq/slider-with-multiple-steps-LdWgwL */
    $(function() {

	$('#student-count').on("input change", function() {

		var
			element = $('#student-count'),
			value = element.val(),
			step;
			
		if (value <= 100) {
			step = 1;
		}
		else {
			step = 100;
		}
		element.attr('step', step);

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

Comments