$(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 ) ); }); });
<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>