jQuery UI Range Slider

by Vasilii Chugunov

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<h2><b>Пример 1</b></h2>
<p>Анимация движения ползунков прекратится при достижении разницы границ диапазона в 39 единиц, но при этом значения границ можно сравнять, продолжая движение мышью в том же направлении</p> 
<div id="slider-range"></div><br />
<h2><b>Пример 2</b></h2>
<p>Анимация движения и изменение значений прекратится одновременно при достижении разницы границ диапазона в 39 единиц</p>
<div id="slider-range2"></div>
<p>Это зависит от того, куда по коду вставлять строку<br />
  $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );</p>

CSS

#slider-range {
  width:300px;
  margin-top:10px;
}
body {
  margin: 15px;
}
p {
  margin: 10px 0 10px 0;
}

JavaScript

$(document).ready(function() {
  $(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 ] );
        if ( (ui.values[0] + 39) >= ui.values[1] ) {
                return false;
        }
        
      }
    });
    $( "#slider-range2" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        if ( (ui.values[0] + 39) >= ui.values[1] ) {
                return false;
        }
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });
});