如何在noUiSlider中使刻度区域可以移动以移动手柄？

Question

当我们add a scale/pips to the slider时，此新区域无法单击以更改句柄的位置。由于我想使用细轨道风格，这可能是UX的问题。

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

如何使这个新区域可以移动手柄？

您可以找到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;
}

作为推荐，您可能希望为＆＃34; clickablePips＆＃34;制作不同的课程。您可以通过.clickablePips .noUi-base { /*CSS rules...*/ }等进行定位。这样，开发人员就会声明此样式的用途，而不是让样式规则影响与#slider匹配的所有项目。

Answer 2

要使区域可单击，您可以将pip的样式设置为指针并听取click事件，如下所示：

let values = testSlider.getElementsByClassName('noUi-value');
for(let val of values){
    val.pip = val.innerHTML;
    val.style.cursor = 'pointer';
    val.onclick = (e) => {
        testSlider.noUiSlider.set(val.pip);
    }
}

1. let values = slider.getElementsByClassName('noUi-value'); - 选择滑块内的所有点值。
2. for (let val of values) - 循环每个点子
3. val.style.cursor = 'pointer'; - 将每个pip光标设置为指针
4. val.pip = val.innerHTML; - 保存pip（0,10,20 ...）在HTML元素本身中的值
5. val.onclick = (e) => { slider.noUiSlider.set(val.pip); } - 点击后，将滑块的值设置为点击的值。

Working JSFiddle