通過拖動在jQuery UI滑塊中移動範圍

Question

我在範圍模式下使用jQuery UI滑塊。有沒有一種方法（插件/擴展/ hack）允許用戶替換範圍（即更改下限和上限）而無需在滑塊外部添加額外的按鈕？在一些GUI小部件中，這是通過從中心拖拉（在兩個處理器之間）完成的。

在此先感謝。

Answer 1

查看問題 Drag the Range of a UI Input Range Slider。有一個描述的rangeDrag功能的jQuery UI滑塊小部件擴展。

Answer 2

如果您使用兩個文本框來重新設置極限變量，那麼您需要執行更改事件功能來檢測任何更改。

$('#rangeMod input:text').change(function() { 

    // set range vars based on new input (you should also validate for (INT)). 
    var txtbox1 = '...'; // based on first text box 
    var txtbox2 = '...'; // based on second text box 

    var range = [txtbox1, txtbox2]; 

    $('#my-slider') 
    .slider("destroy") /* Destroy it Before Rebind/Re-Init */ 
    .slider({range:true, min: range[0], max: range[1], ... }); 
}); 

Answer 3

那麼，蒂莫西的答案似乎並不是對實際發佈的問題的回答。

我也尋找類似的東西，赫爾曼描述和除了在jQuery論壇https://forum.jquery.com/topic/draggable-range-in-slider一個功能要求我發現了一個博客條目它的目標同樣的問題http://erraticdev.blogspot.com/2011/08/advanced-jquery-ui-range-slider.html

從博客帖子滑塊擴展允許用於鎖定滑塊手柄以防止超過規定的最大範圍。可以使用手柄移動整個範圍，而不是通過拖動手柄之間的「空間」。

最後它沒有解決我的問題，但它非常接近解決方案。