Customize noUiSlider handle with text and shape into circle

问题

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.

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

回答1:

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

来源：https://stackoverflow.com/questions/41812263/customize-nouislider-handle-with-text-and-shape-into-circle