ui-slider的范围问题

Question

我正在尝试使用滑块设置范围。 我希望两个光标的重叠度不相同。 换句话说，当最小值滑块和最大值滑块彼此相邻时，如何使滑块冻结并保持原状。 有任何想法吗？ 先感谢您。

Answer 1

昨天做自定义样式的滑块时，我正在寻找解决方案。

从我发现的结果中什么都没有，然后我自己想出了一个简单的方法：

1.使用左侧和右侧填充将滑块放入容器div

<div class="slider-container">
  <div class="slider-main ..."></div>
</div>

2.设置样式

-容器（左右边缘填充到一半的滑块-手柄宽度）滑块

-句柄（左边距减去宽度的一半）

这样的事情（我从内存中写）

<style>
  .slider-container {
    padding-left: 8px;
    padding-right: 8px;
  }
  .slider-handle {
    width: 16px;
    margin-left: -8px;
  }
</style>

您还应该从slider-main中删除样式并将其从那里移到slider-container

Answer 2

当它们即将发生冲突时，从slide函数返回false似乎可行： http : //jsbin.com/eyoge3/3

来自jsbin的代码：

slide: function(event, ui) {
    var oldMin = $("#slider").slider("values", 0);
    var oldMax = $("#slider").slider("values", 1);
    var newMin = ui.values[0];
    var newMax = ui.values[1];

    if( oldMin != newMin && newMin == oldMax )
      return false;
    else if( oldMax != newMax && newMax == oldMin )
      return false;
}

Answer 3

jQuery UI滑块范围扩展

我需要类似的东西，所以我编写了现有jQuery UI滑块插件/小部件的扩展。 这些是该扩展程序支持的其他选项：

• 最小和最大范围大小-最小范围大小正是您所追求的
• 限制上下限边界值-设置下限边界柄的最大值和上限边界柄的最小值
• 自动范围滑动-允许将（任何）手柄拖动到最大范围大小的限制内，这反过来又拖动另一个手柄。

您可以在我的博客上获取代码 （ 该代码已更新，因此我不会直接在此处发布）。