如何为连接范围设置不同的边距和限制

Question

我正在使用NoUiSlider，我的主要用例是拥有多个可以独立运行的范围。

例如，2 个范围代表 2 个年度范围：

• 2002 年的一个范围（2002 年初至 2002 年底）
• 从 2007 年初到 2010 年底的一个范围。

此外，两个范围都可以在轴上移动以更改涵盖的年份，并且范围大小也可以更改为包括更多或更少的年份。

 

这很好用。

但是，我确实有一些限制。例如，用户不能创建大于或小于某个大小的范围。 NoUiSlider 确实有控制这个的选项：Margin 和 Limit。这些确实执行了限制，但它们对所有句柄（在所有范围内）全局起作用。

我真的只关心在单个范围内的连接句柄之间执行规则。

在这个小提琴中：https://jsfiddle.net/hbL4v0ce/ 你可以看到行为。

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
  start: [2002, 2003, 2008, 2012],
  step: 1,
  connect: [false, true, false, true, false],
  margin: 0,
  limit: 4,
  behaviour: 'drag',
  range: {
    'min': 2000,
    'max': 2016
  },
  pips: {
    mode: 'steps',
    density: -1
  },
});

无法再将右侧范围移动到右侧，因为其中一个手柄已经在配置的距离左侧范围 4 个单位的限制范围内，同样左侧范围也无法再向左移动。这不是我想要的行为。

如果我可以为每个连接范围指定单独的限制/边距，我认为这将解决我的问题。是否有可能做到这一点？还是有其他方法可以实现我的目标？

Answer 1

noUiSlider 没有针对不同手柄使用不同边距/限制的功能。您有多种选择：

• 从滑块中提取年份，并将滑块值映射到格式化程序中的年份。例如，您可以让滑块从 0 - 100 运行，然后将最后两个句柄的值映射到 2007 - 2010。然后您可以强制执行 update event 中的任何约束。如果您禁用 step 选项并改为实现 "soft limits"，这可能看起来/效果更好。

• 或者，您可以禁用margin 选项，并在update 事件中使用set 方法自己实现保证金行为。 this Github issue 中有一个很好的例子来说明如何做到这一点。