javascript - 更改 noUiSlider 的颜色

Question

我真的不知道应该使用什么类来更改noUiSlider中滑块的颜色？我希望滑块在栏上滑块的左侧具有蓝色，在右侧具有白色；在这个例子中它是如何演示的。我怎样才能做到这一点？

这是创建滑块的部分：

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

并在html：

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

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

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;
}

这是我的钢笔供参考。我希望它对如何有所帮助。