通过拖动在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

从博客帖子滑块扩展允许用于锁定滑块手柄以防止超过规定的最大范围。可以使用手柄移动整个范围，而不是通过拖动手柄之间的“空间”。

最后它没有解决我的问题，但它非常接近解决方案。