Jak zapobiec nakładaniu się suwaków interfejsu użytkownika jQuery?

Question

Używając jQuery-UI 1.7, mam zintegrowany suwak. Wszystko działa dobrze, ale uchwyty suwaka zachodzą na siebie podczas przeciągania. Jak mogę temu zapobiec?

Można zobaczyć moją ui suwak tutaj

Widok domyślny:

Pokryw widok:

Answer 1

Można to osiągnąć poprzez wykrywanie zachodząc w slide obsługa zdarzeń i zwracanie wartości false, aby zapobiec wystąpieniu slajdu . Przykład:

$("#slider-range").slider({ 
 
    range: true, 
 
    min: 0, 
 
    max: 500, 
 
    values: [ 75, 300 ], 
 
    slide: function(event, ui) { 
 
     if ((ui.values[ 0 ] + 20) >= ui.values[ 1 ]) { 
 
      return false; 
 
     } 
 
    } 
 
});

body { padding: 50px; }

<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"> 
 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
 
<div id="slider-range"></div>

Należy zauważyć, że w tym przykładzie wartość 20 jest łatwo ustalony na podstawie szerokość uchwytu. Na twój przypadek użycia będziesz musiał zmienić to na cokolwiek ma sens.

Answer 2

<script> 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 
      if ((ui.values[0] + 55) >= ui.values[1]) { 
       return false; 
      } 
     } 
    });​ 
</script>