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

Question

我使用noUiSlider和＆＃34;软限制＆＃34; （https://refreshless.com/nouislider/examples/#section-soft-limits）我想为有限的区域设置特定的背景颜色。例如，如果我无法将手柄拖到前20个值的任何位置，则此栏的此部分应为红色背景。

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

1对于有限的区域

2对于手柄左侧的区域

3对于手柄右侧的区域

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

Answer 1

您可以使用linear-gradient：

在CSS中执行此操作

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

为任意数量的彩色区域添加padding个以上的色标。