如何在JQuery UI Slider組件中實現碰撞檢測？

我有一個項目，我需要一個滑塊UI，該Jquery slider似乎做的工作但似乎當我有一個範圍滑塊，這意味着兩個手柄定義範圍：如何在JQuery UI Slider組件中實現碰撞檢測？

enter image description here

我有以下問題：

我希望手柄具有碰撞檢測功能，意味着手柄彼此不接觸，並且彼此不重疊，並且值的計算是正確的，這裏是發生在外面的例子的盒子配置。

enter image description here

我想滑塊停止這樣的：

enter image description here

而且標籤讀取$ 62- $ 63

我知道這存在，我已經看到了用插件完成，我錯過了什麼。

謝謝

來源

2011-12-22 David MZ

這是一個known bug有一個可用的補丁。還有與該主題相關的其他用戶提交。

來源

2011-12-22 14:59:26

如何將補丁應用於JQuary UI的縮小版本？ – 2011-12-22 15:59:59

您可以綁定到幻燈片事件，並返回false防止滑動

$(".selector").bind("slide", function(event, ui) { 
    var values = $(".selector").slider("option", "values"); 
    if (values[1] - values[0] < 10) 
    return false; 
});

來源

2011-12-22 14:59:27 scripto

OP仍然希望數字彼此相隔1次，而不是10次。（其中涉及新的邏輯，不是將整個滑塊的寬度/長度用作數值庫，而是將滑塊的邊緣用於其他元素的位置（不包括UI的寬度）） – 2011-12-22 15:03:45

添加碰撞檢測滑動事件在第一次創建滑塊時：

$('.selector').slider({ 
    // setup 
    slide: function(evt, ui) { 
     if (ui.values[0] >= ui.values[1]) 
     return false; 
    } 
});

這可以防止手柄從碰撞或重疊。

來源

2012-06-01 11:18:58

謝謝pontus，我只是需要這個 – 2012-09-13 14:43:22

如何在JQuery UI Slider組件中實現碰撞檢測？

回答

相關問題