Question

我正在尝试使用滑块设置范围。如果两个游标在相同的值中没有重叠，我更愿意。换句话说，当最小值滑块和最大值滑块彼此相邻时，如何使滑块冻结并保持放置。有任何想法吗？提前谢谢。

Answer 1

当滑动功能即将发生碰撞时，从幻灯片功能中返回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 2

jQuery UI滑块范围扩展

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

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

你可以get the code on my blog（它会更新，所以我不会直接在这里发布）。

Answer 3

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

没有什么比我找到的更好，然后我自己想出了一个简单的方法：

1.将滑块放入带左右填充的容器div中

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

2.设置

的样式

-container（左右填充到半滑块 - 手柄宽度）滑块

-handle（左边距到其宽度的一半）

像这样（我从记忆中写作）

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

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

ui-slider的范围问题

3 个答案:

jQuery UI滑块范围扩展