plot.ly（dash_core_components）滑块颜色更改

Question

我昨天第一次接触到 plot.ly dash，并创建了一些交互式图表。我添加了如下代码中的 dash_core_components.Slider() 对象。

dcc.Slider(
    id='month--slider',
    min=0,
    max=12,
    value=12,
    step=None,
    marks={'1': '1', '6': '6', '12': {'label': '12', 'style': {'color': 'red'}}}
)

我已经阅读了help(dcc.Slider)，但是我找不到更改下面滑块的天蓝色的方法。

所以我的问题是...是否可以更改plot.ly dash的默认滑块的颜色（或样式）？提前感谢。

- su79eu7k

Answer 1

你需要使用CSS更改这个。

首先，让你的Dash应用程序知道你将外部托管你的css。

文档在这里：https://plot.ly/dash/external-resources

然后，只需检查您的Dash应用程序网页并查找滑块及其组件的类名。

最后，在样式表中添加必要的CSS。

例如，我通过将以下代码添加到我的外部托管css文件中来更改禁用滑块的颜色...

.rc-slider-disabled{
  background-color: #0097a7;
}

希望这可以帮到你！

- Taylor Olson

---

非常有帮助！谢谢。 - su79eu7k

这会更改背景颜色，但不会更改被要求更改的天蓝色滑动条的颜色。 - MatAff

我将其添加到我的CSS文件中，但没有任何反应。"然后，只需检查您的仪表板应用程序的网页，并找到滑块及其组件的类名。" 我该如何做到这一点？ - Vitor Bento

Answer 2

请参考Taylor Olson的答案和其中引用的文档。根据文档概述：创建一个assets文件夹并添加你的CSS文件，然后使用以下代码实例化你的应用：

app = dash.Dash(__name__)

请参考以下示例 CSS 代码，将滑块的颜色更改为红色（根据需要更新颜色）：

.rc-slider-track {
  background-color: red;
}

.rc-slider-dot-active {  
  border-color: red;
  border: solid 2px red;
}

.rc-slider-handle {
  background-color: red;
  border-color: red;
}

.rc-slider-handle:hover {
  border-color: red;
}

.rc-slider-handle-active:active {
  border-color: red;
}

- MatAff

---

在最低的两个设置中，应该是 .rc-slider 而不是 .rc.slider，对吗？ - felice

没错！应该是rc-而不是rc。感谢您指出@felice - MatAff

我将其添加到我的CSS文件中，但没有任何反应。"然后，只需检查您的仪表板应用程序的网页，并找到滑块及其组件的类名。" 我该如何做到这一点？ - Vitor Bento