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

Question

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

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

1 对于有限的区域

2 对于手柄左侧的区域

3 手柄右侧区域

See image here 希望你明白我的意思。谢谢！

Answer 1

您可以在 CSS 中使用linear-gradient：

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

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