JSFiddle - React, Tailwind, and code Playground

HTML

<div id="priceRange"></div>
<div id="min_price">$0</div>
<span id="max_price">$1000</span>
<div class="clear"></div>

CSS

#min_price {
    float: left;
    font-size:7.5pt;
    position: relative;
    top: 5px;
    left:1px;
    text-align:left;
    width: 15px
}
#max_price {
    float: left;
    font-size:7.5pt;
    position: relative;
    top: 5px;
    left:82px;
    text-align:right
}
#min_price_range, #max_price_range {
    width: 50px;
    font-size: 7pt
}
.ui-slider .ui-slider-handle {
    width: .55em;
    height: .6em;
}
.ui-slider .ui-slider-range {
    font-size: 8pt
}
.ui-slider-horizontal {
    height: .2em;
    width: 120px;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.25em;
    margin-left: 0em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

JavaScript

$("#priceRange").slider({
    range: true,
    min: 0,
    max: 1000,
    values: [0, 1000],
    step: 25,
    slide: function (event, ui) {
        $("#min_price").text("$" + ui.values[0]);
        $("#max_price").text("$" + ui.values[1]);

        
    }
});