javascript - 如何使noUiSlider中的缩放区域可点击以移动 handle ？

Question

当我们 add a scale/pips to the slider , 这个新区域不可点击来改变 handle 的位置。因为我想使用细轨道样式，这对用户体验来说可能是个问题。

我试图遵循这个 issue 的想法这是关于处理程序的，但这修改了那种情况下所有元素的所有一致性。

如何使这个新区域可点击以移动 handle ？

您可以找到 example on JSFiddle .

比例区域已添加:

pips: {
  mode: 'steps',
  density: 10
}

Answer 1

要获得所需的结果，您可以更改匹配 .noUi-base 以及 .noUi-connect 的元素的高度。在这个updated fiddle ，我添加了这个 CSS:

#slider .noUi-base {
  /* makes the clickable area larger for pips */
  height: 55px;
}

#slider .noUi-connect {
  /* shrinks child of prev style to its original height */
  height: 18px;
}

作为建议，您可能希望为“clickablePips”创建一个不同的类，您将通过 .clickablePips .noUi-base {/*CSS rules...*/} 等来定位它。这样，开发人员就可以声明此样式的用途，而不是让样式规则影响与 #slider 匹配的所有元素。