nouislider - noUiSlider：为有限区域设置背景颜色

Question

我正在使用带有“软限制”（https://refreshless.com/nouislider/examples/#section-soft-limits）的 noUiSlider，我想为受限区域设置特定的背景颜色。例如，如果我无法将句柄拖动到前 20 个值的任何位置，则该栏的这一部分应该具有红色背景色。

这是因为我需要三种不同的背景颜色：

1 对于有限的区域

2 手柄左侧区域

3 手柄右侧区域

在这里看图片 希望你明白我的意思。谢谢！

Answer 1

您可以在 CSS 中执行此操作，使用linear-gradient：

.noUi-background {
    background-image: linear-gradient(to right, #a2ea4c 20%, #07aa91 20%, #07aa91 80%, #a2ea4c 80%);
}

padding为任意数量的彩色区域添加一个和更多的色标。