JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<body>
	<ol>
		<li>Slide handle to the max value.  Verify slide/change == 1000.</li>
		<li>Click and drag handle EXACTLY one pixel to the right.</li>
		<li>Values is now 999.  (Should still be 1000.)</li>
		<li>If you release the button and repeat, you can walk the value down to 992, while dragging right one pixel.</li>
	</ol>
	Repeatable for min/max/step/width values where the step represents < 1 pixel.
	This is a minor annoyance for apps that want to adjust via mouse over a wide range, 
	but allow keyboard arrows for small step adjustments.
<div id="slider" style='width: 100px; margin: 0 auto;'></div>

<div>Slide: <span id="slide"></span></div>
<div>Change: <span id="change"></span></div>

</body>

JavaScript

$(function() {
	$("#slider").slider({
		min: 0,
		max: 1000,
		step: 1,
		slide: function(e, ui) { $("#slide").html(ui.value); }, 
		change: function(e, ui) { $("#change").html(ui.value); }
	});
});