更改 noUiSlider 的颜色

Question

我真的搞不懂 class 应该用什么来改变 noUiSlider? I want the slider to have blue color to the left of the slider on the bar, and white to the right; how its demonstrated in this example 中滑块的颜色。我怎样才能做到这一点？

下面是创建滑块的部分：

$('#slider-range').noUiSlider({
        start: [ start ],
        step: 1,
        range: {
            'min': [ 1 ],
            'max': [ 10 ]
        }
    });

并在 html 中：

<div id="slider-range" type="range"/></div>

我尝试了 class 描述的所有可能 here，但我得到的最多的是所有条都是蓝色或白色，但不是左边是蓝色，右边是白色。所以，我的问题是如何获得这种样式？

Answer 1

原来你必须在滑块中包含 connect 选项。

$('#slider-range').noUiSlider({
        start: [ start ],
        step: 1,
        connect: "lower",
        range: {
            'min': [ 1 ],
            'max': [ 10 ]
        }
    });

Answer 2

我正在使用 Materialize Css 版本 1.0.0，它包含 noUiSlider 作为库的一部分。

我试图用我自己的颜色来设计这个控件，这是我改变一些东西后得到的类:

你所要做的就是覆盖这个类:

.noUi-connect {
    background: purple;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
    background: purple;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
    background-color: purple;
}

这里my pen供参考。我希望它能有所帮助。

更改 noUiSlider 的颜色

Change the color of the noUiSlider

javascript

css

jquery

nouislider