JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<link rel="stylesheet" href="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css">
<script src="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<link rel="stylesheet" href="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.pips.min.css">
<div id="slider"></div>

CSS

#slider { margin: 50px; }

JavaScript

$("#slider").noUiSlider({
    range: { min: 0, max: 100 },
    start: 10
}).on('change', function(event, value){
    // http://stackoverflow.com/questions/11022488/javascript-using-round-to-the-nearest-10
    $(this).val(Math.ceil(value / 10) * 10);
});

// For show :)
$("#slider").noUiSlider_pips({
	mode: 'count',
	values: 11,
});