Css 将文本和形状自定义为圆形的noUiSlider控制柄
我刚刚开始熟悉noUiSlider,我在谷歌上搜索了一些例子,用不同的方法来使用它。不幸的是,大多数人都在添加自定义图像,而不是添加文本Css 将文本和形状自定义为圆形的noUiSlider控制柄,css,nouislider,Css,Nouislider,我刚刚开始熟悉noUiSlider,我在谷歌上搜索了一些例子,用不同的方法来使用它。不幸的是,大多数人都在添加自定义图像,而不是添加文本 有人知道在哪里或者有一些例子说明如何使用css或js文件以独特的方式设计句柄吗?所有句柄样式都在类.noUi handle上。手柄上的“雕刻”是使用:before和:after伪元素完成的。您可以使用这些元素及其内容属性来显示文本 .noUi-handle { border: 1px solid #D9D9D9; border-radius:
有人知道在哪里或者有一些例子说明如何使用css或js文件以独特的方式设计句柄吗?所有句柄样式都在类
.noUi handle
上。手柄上的“雕刻”是使用:before
和:after
伪元素完成的。您可以使用这些元素及其内容属性来显示文本
.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";
}
这种方法最终非常有效。我注意到,从我正在处理的现有css中,有一个:before和:after,我看到了我的文本,但不知道如何恰当地使用它。我能够定位它,并像按钮一样围绕文本创建一些css。非常感谢你的帮助!