Làm thế nào để ngăn chặn xử lý thanh trượt jQuery UI chồng lên nhau?

Question

Sử dụng jQuery-UI 1.7, tôi đã tích hợp thanh trượt. Tất cả mọi thứ đang làm việc tốt, Nhưng xử lý của thanh trượt được chồng lên nhau trong khi kéo. Làm thế nào tôi có thể ngăn chặn điều này.

Bạn có thể thấy ui trượt của tôi ở đây

xem mặc định:

xem chồng chéo:

Answer 1

Bạn có thể thực hiện điều này bằng cách phát hiện sự chồng chéo trong một slide xử lý sự kiện và trả về false để ngăn không cho slide xuất hiện . Ví dụ:

$("#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>

Lưu ý rằng trong ví dụ này giá trị của 20 chỉ đơn giản là hardcoded dựa trên chiều rộng của tay cầm. Mỗi trường hợp sử dụng của bạn, bạn sẽ phải thay đổi điều đó thành bất kỳ điều gì có ý nghĩa.

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>