如何让noUiSlider中的缩放区域可点击移动手柄？

Question

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

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

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

缩放区域已添加：

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" 制作一个不同的 class，您将以 .clickablePips .noUi-base { /*CSS rules...*/ } 等为目标。这样，开发人员就可以声明其意图这种样式不是让样式规则影响匹配 #slider.

的所有项目

Answer 2

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

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);
    }
}

let values = slider.getElementsByClassName('noUi-value'); - 选择滑块内的所有点值。
for (let val of values) - 遍历每个点
val.style.cursor = 'pointer'; - 将每个点光标设置为指针
val.pip = val.innerHTML; - 将点值 (0, 10,20...) 保存在 HTML 元素本身
val.onclick = (e) => { slider.noUiSlider.set(val.pip); } - 单击时将滑块的值设置为单击的值。

Working JSFiddle

如何让noUiSlider中的缩放区域可点击移动手柄？

How to make the scale area clickable in noUiSlider to move the handle?

javascript

css

nouislider