JSFiddle - React, Tailwind, and code Playground

by Maks Kolesnyk

HTML

<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css">
<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>

CSS

#slider-range {
  width: 50%;
}

JavaScript

$( "#slider-range" ).slider({
		range: true,
		min: 0,
		max: 217,
		values: [ 0, 217 ],
		slide: function( event, ui ) {
			$( "#amount" ).val( ui.values[ 0 ] );
			$( "#amount2" ).val( ui.values[ 1 ] );
		}
	});

	$("#amount").change(function() {
	    $("#slider-range").slider('values',0,$(this).val());
	});
	$("#amount2").change(function() {
	    $("#slider-range").slider('values',1,$(this).val());
	});