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

这是我的笔供参考。希望对您有所帮助。