通过拖动在jQuery UI滑块中移动范围

时间:2011-08-11 23:02:48

标签: jquery jquery-ui plugins slider jquery-ui-slider

我在范围模式下使用jQuery UI Slider。有没有办法(插件/扩展/黑客)允许用户移动范围(即更改下限和上限)而不在滑块外添加额外的按钮?在某些GUI小部件中,这是通过从中心(两个处理程序之间)拖动来完成的。

提前致谢。

3 个答案:

答案 0 :(得分:1)

好吧,蒂莫西的答案似乎不是对实际发布的问题的回答。

我也在搜索Herman所描述的类似内容,除了jQuery论坛https://forum.jquery.com/topic/draggable-range-in-slider上的一个功能请求我发现了一个针对同一问题的博客条目http://erraticdev.blogspot.com/2011/08/advanced-jquery-ui-range-slider.html

该博客文章中的滑块扩展允许锁定滑块手柄以防止超出定义的最大范围。可以使用句柄移动整个范围,而不是通过拖动句柄之间的“空格”。

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

答案 1 :(得分:1)

查看问题 Drag the Range of a UI Input Range Slider。所描述的rangeDrag功能有一个jQuery UI Slider小部件扩展。

答案 2 :(得分:0)

如果您使用两个文本框重新设置限制变量,那么您需要执行检测任何更改的更改事件功能。

$('#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], ... });
});