JS：改变滑块矩形的颜色

Question

我正在使用以下滑块作为程序，我想在实例化滑块时能够使用不同滑块颜色的滑块。目前，我看到滑块颜色在.css文件（d3.slider.css）中定义。 http://sujeetsr.github.io/d3.slider/

如何更改滑块颜色值，以便我可以使用不同的起始颜色调用多个滑块，如下所示？

Answer 1

您需要更改这些类中的颜色dragger-outer和dragger-inner for each slider

Answer 2

我看到有2种css样式需要覆盖。

• 。滑块条颜色的.d3slider-rect-value，和
• .dragger-outer为滑块头。

您可以在css中覆盖这些样式（这会影响所有滑块）。 否则，在JS代码中获取滑块的上述元素并动态应用样式。

Answer 3

您的圈子代码元素在这里

<circle class="dragger-outer" r="10" transform="translate(0,6)"></circle>
<circle class="dragger-inner" r="4" transform="translate(0,6)"></circle>

那么你的CSS课程就在这里

.dragger-inner {
    fill: #65b042;
    stroke: none;
}

.dragger-outer {
    fill: #fff;
    stroke: #000;
}

你可以用不同颜色添加更多类似上面的类。如果你想创建6个圆圈，你必须为它创建12个类（使用不同的名称，如.dragger-inner-red）。