noUiSlider: установите цвет фона для ограниченной области

Question

Я использую noUiSlider с «мягкими пределами» (https://refreshless.com/nouislider/examples/#section-soft-limits), и я хочу установить определенный цвет фона для ограниченной области. Например, если я не могу перетащить дескриптор в любом месте по первым 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 и больше цвета останавливается для любого количества цветных областей.