Слайдер ui.js

        <div class="shop-filter">
            <div class="area-title">
        <h3 class="title-group gfont-1">Filters Products</h3>
            </div>
            <h4 class="shop-price-title">Price</h4>
            <div class="info_widget">
            <div class="price_filter">
            <div class="filter" id="slider-range" ></div>
            <div class="price_slider_amount">
            <input   type="text" id="amount" name="price" checked="checked" placeholder="Add Your Price" />
            <input id="button-filter" type="submit"  value="Filter"/>  
            </div>
            </div>
            </div>
            </div>
                        
 
<script>
 $(function() {
      $( "#slider-range" ).slider({
       range: true,
       min: 40,
       max: 600,
       values: [ 60, 570 ],
       slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
       }
      });
      $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
       " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    }); 
</script>