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

Question

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

提前致谢。

Answer 1

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

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

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

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

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], ... });
});