自定义noUiSlider手柄的文字和形状圈为

Question

我刚刚熟悉noUiSlider，并用Google搜索以找到存在的不同方式的例子来使用它。不幸的是，大多数添加自定义图像，而不是添加文本

有谁知道如何使用css或js文件以独特的方式设计句柄的位置或者有一些例子吗？

Answer 1

所有手柄造型都在类.noUi-handle上。手柄上的“雕刻”使用: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"; 
}