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/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<body>
	<ol>
		<li>Click and hold on the slider handle</li>
		<li>Slide quickly off to the right or left.</li>
		<li>Note that the handle is pegged at the end, but the "slide" value does not match the UI.</li>
		<li>Release the button and note that the "change" value correctly matches the UI.</li>
	</ol>
	This is a problem for an app that uses the slider position to live-update
	a UI visual... The end-user will see a "jump" when they release the mouse 
	button, even though the slider remains steady.
<div id="slider" style='width: 50%; margin: 0 auto;'></div>

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

</body>

JavaScript

$(function() {
	$slider = $("#slider");

	$slider.slider({
		slide: function() { logit("#slide") }, 
		change: function() { logit("#change") }
	});

	$slider.mouseout(function() { logit("#out") });
});


/* 
 Yes this is bad code, but simulates a CPU-intensive client action triggered by slide events, and helps isolate slider handle from value updates, so you don't have to drag so quickly to see the effect.  The bug exists even without this artificial delay.
 */
function sleep(delay) {
	var start = new Date().getTime();
	while (new Date().getTime() < start + delay);
}

function logit(m) {
	$(m).html($slider.slider("value")); 
	sleep(100);
}