JSFiddle - React, Tailwind, and code Playground

HTML

<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-min"><div class="ui-slider-handle"></div></div>

CSS

div.ui-slider-range-min { background: green !important; }
div#slider-range-min { background: yellow !important; }
div#slider-range-min div.ui-slider-handle { background: red;  }

JavaScript

$( "#slider-range-min" ).slider({
range: "min",
value: 37,
min: 1,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );