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

Question

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

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

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

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

这很好用。

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

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

在此 fiddle 中：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 个单位的限制，同样，左侧范围也无法再向右移动左边。这不是我想要的行为。

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

Answer 1

noUiSlider 没有为不同的手柄使用不同的 margins/limits 的功能。您有多种选择：

从滑块中提取年份，并将滑块值映射到格式化程序中的年份。例如，您可以让滑块运行从 0 到 100，然后将最后两个手柄的值映射到 2007 到 2010。然后您可以强制执行 update event. This might look/work better if you disable the step option, and implement "soft limits" 中的任何约束。
或者，您可以禁用 margin 选项，并使用 update 事件中的 set 方法自行实施保证金行为。在 this Github issue.

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

How to set different margins and limits for connected ranges

javascript

nouislider