noUiSlider:为有限区域设置背景色 [英] noUiSlider: Set a background color for the limited area

问题描述

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

I'm using noUiSlider with the "soft limits" (https://refreshless.com/nouislider/examples/#section-soft-limits) and I want to set a specific background color for the area that's limited. For example, if I can't drag the handle anywhere across the first 20 values, this section of the bar should have a red background color.

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

This is because I need three different background colors:

1在有限区域内

2对于手柄左侧的区域

2 For the area on the left side of the handle

3对于手柄右侧的区域

3 For the area on the right side of the handle

在此处查看图片 希望你明白我的意思.谢谢！

See image here Hope you understand what I mean. Thanks!

推荐答案

您可以使用linear-gradient在CSS中进行此操作:

You can do this in CSS, using linear-gradient:

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

添加padding可以为任意数量的彩色区域添加更多色标.

Add a padding and more color stops for any number of colored areas.

这篇关于noUiSlider:为有限区域设置背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！