JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css">
    <div id="container">
        <p>
            Slider with shaded area. Value: <span id="val">0</span>. Inside shaded area? <span id="status">-</span>.
            <div id="slider-shaded"><div id="range"></div></div>
        </p>
    
        <p>
            Slider ajusting shaded area. Min: <span id="min">0</span>. Max: <span id="max">0</span>.
            <div id="slider-areasetup"></div>
        </p>
    </div>

CSS

#container { padding:20px }
    #slider-shaded, #slider-areasetup { width:50% }
    p { margin: 10px 0px 10px; }

    #range {
        position: absolute;
        height:100%;
        top: 0;
        background-color:gray;
    }

JavaScript

$(document).ready(function() {

    $setupSlider = $("#slider-areasetup");
    $("#slider-shaded").slider({
        slide: function(e,ui) {
            $("#val").html(ui.value);
            var isInsideShadedArea = 
                ui.value >= $setupSlider.slider("values",0) && ui.value <= $setupSlider.slider("values",1);
            $("#status").html( isInsideShadedArea ? "Inside" : "Outside" );
        }
    });

    $("#slider-areasetup").slider({
        range: true,
        min: 0,
        max: 100,
        slide: function(e,ui) {
            var min = ui.values[0];
            var max = ui.values[1];
            $("#min").html(min);
            $("#max").html(max);

            var width = max - min;;
            $("#range").css( { "left": min + "%", "width": width + "%" } );

        }
    });
});