noUiSlider: Set a background color for the limited area

安稳与你 提交于 2020-02-04 05:42:09

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!