JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<div>
        Min: <span id="selected_value">0</span><br />

    </div>
    <div>
        <div class="slider"><div id="range"></div></div>
    </div>

CSS

#range
{
    position:absolute;
    height:100%;
    top: 0;
}

body div.ui-slider-range.ui-widget-header {
    background:blue;
}

JavaScript

$(document).ready(function () {

            var slider = $('.slider').slider({
                range: true,
                min: 0,
                max: 100,
                values: [ 75, 80 ],
                change: function (e, ui) {
                    //                    $("#img1").fadeOut();
                    //                    alert("done");
                },
                slide: function (e, ui) {
                    var point = ui.value;
                    $("#selected_value").html(point);
                    var width = 100 - point;
                   $("#range").css({ "width": point + "%" });
                }

            });
    
    console.log(slider);
});