JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range" data-min="0" data-max="5" data-stop="alert('qwdwq')"></div>

JavaScript

$(document).ready(function () {
  var div = $("div#slider-range");
  div.slider({
    range: true,
    min: div.data("min"),
    max: div.data("max"),
    values: [ 0,5],
    stop: function( event, ui ) {div.data("stop")},
    slide: function( event, ui ) {
 	$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
	}
	});
	$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +" - $" + $( "#slider-range" ).slider( 	"values", 1 ) );
	
});