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

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选项，并使用set事件中的update方法自己实现保证金行为。在this Github issue中有一个很好的示例。