用文本和形状自定义noUiSlider手柄成圆形 [英] Customize noUiSlider handle with text and shape into circle

问题描述

我现在刚刚熟悉noUiSlider，我通过谷歌搜索找到存在于其中的示例，并以不同的方式使用它.不幸的是，大多数都是在添加自定义图像而不是添加文本.

I'm just now becoming familiar with the noUiSlider and I googled to find examples of what exists out there with different ways to use it. Unfortunately most were adding custom images instead of adding text.

有人知道如何使用css或js文件以独特的方式设计手柄吗?

Does anyone know where or have some examples of how to design the handle in a unique way using the css or js files?

推荐答案

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

All handle styling is on the class .noUi-handle. The 'carving' on the handle is done using the :before and :after pseudo elements. You could use these elements and their content property to display text.

.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 */
}

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

If the handle text has to be updated with the slider value, you could set the value as an attribute on the slider as such:

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

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

And then style the handle using that attribute:

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

这篇关于用文本和形状自定义noUiSlider手柄成圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！