JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<div class="demo">  
    <p>     
        <label for="amount">Price range:</label>     
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
    </p>  
    <div id="slider-range"></div>  
</div><!-- End demo -->

CSS

#demo-frame > div.demo { padding: 10px !important; };

JavaScript

$(function() {         
    $( "#slider-range" ).slider({             
        range: true,             
        min: 0,             
        max: 500,             
        values: [ 75, 300 ],             
        slide: function( event, ui ) {                 
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );             
        }         
    });         
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) );     
});