JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
</head>
<body>
 
<p>
    <label for="amount-1">Price range:</label>
    <input type="text" id="amount-1" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
 
<div id="slider-range-1"></div>
    
<p>
    <label for="amount-2">Price range:</label>
    <input type="text" id="amount-2" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
 
<div id="slider-range-2"></div>
 
 
</body>
</html>

JavaScript

$(document).ready(function() {
    $( "#slider-range-1" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
            $( "#amount-1" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        },
        change: function(event, ui) { 
            var min_1 = $("#slider-range-1").slider("values", 0);
            var max_1 = $("#slider-range-1").slider("values", 1);
            var min_2 = $("#slider-range-2").slider("values", 0);
            var max_2 = $("#slider-range-2").slider("values", 1);
           
            $.post('', {}, function(data) {
                $('').html(data);
            });
        }    
    });
    $( "#amount-1" ).val( "$" + $( "#slider-range-1" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range-1" ).slider( "values", 1 ) );
    
    $( "#slider-range-2" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
            $( "#amount-2" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        },
        change: function(event, ui) { 
            var min_1 = $("#slider-range-1").slider("values", 0);
            var max_1 = $("#slider-range-1").slider("values", 1);
            var min_2 = $("#slider-range-2").slider("values", 0);
            var max_2 = $("#slider-range-2").slider("values", 1);
            
            $.post('', {}, function(data) {
                $('').html(data);
            });
        }
    });
    
    $( "#amount-2" ).val( "$" + $( "#slider-range-2" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range-2" ).slider( "values", 1 ) );
});