将带有文本和形状的 noUiSlider 手柄自定义为圆形

Question

我刚刚开始熟悉 noUiSlider，我在 google 上搜索了现有的不同使用方式的示例。不幸的是，大多数都是添加自定义图像而不是添加文本。

有谁知道在哪里或有一些示例说明如何使用 css 或 js 文件以独特的方式设计手柄？

Answer 1

所有手柄样式都在 class .noUi-handle 上。句柄上的 'carving' 是使用 :before 和 :after 伪元素完成的。您可以使用这些元素及其 content 属性来显示文本。

.noUi-handle {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background: #FFF;
    cursor: default;
    box-shadow: inset 0 0 1px #FFF;
}
.noUi-handle:after {
    content: "Some words here"; /* Add something like this */
}

如果必须使用滑块值更新句柄文本，您可以将值设置为滑块上的属性，如下所示：

slider.noUiSlider.on('update', function(values, handle) {
    this.target.setAttribute('data-value' + handle, values[handle]);
});

然后使用该属性设置句柄样式：

[data-value0="5"] .noUi-handle:after {
    content: "Text only for value 5";
}

将带有文本和形状的 noUiSlider 手柄自定义为圆形

Customize noUiSlider handle with text and shape into circle

css

nouislider