问题
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 For the limited area
2 For the area on the left side of the handle
3 For the area on the right side of the handle
See image here Hope you understand what I mean. Thanks!
回答1:
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%);
}
Add a padding
and more color stops for any number of colored areas.
来源:https://stackoverflow.com/questions/35561800/nouislider-set-a-background-color-for-the-limited-area