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

Question

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

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

• 2002 年的一个范围(2002 年初到 2002 年底)
• 2007 年初到 2010 年底的一个范围。

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

这很好用。

但是，我确实有一些限制。例如，用户不能创建大于或小于特定大小的范围。 NoUiSlider 确实有控制这个的选项:Margin和 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 个单位的限制处，同样，左侧范围也无法再向左移动。这不是我想要的行为。

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

Answer 1

noUiSlider 没有为不同的句柄使用不同的边距/限制的功能。您有多种选择:

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

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