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 破折号的默认滑块的颜色（或样式）？提前谢谢你。

Answer 1

您需要使用 css 更改此设置。

首先，让您的 dash 应用知道您将在外部托管 css。

此处的文档：https://plot.ly/dash/external-resources

然后，只需检查您的 dash 应用程序的网页，找到 class 滑块及其组件的名称。

最后，将必要的 css 添加到您的样式中 sheet。

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

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

希望对您有所帮助！

Answer 2

请参阅 Taylor Olson 的回答以及其中引用的文档。如文档中所述：创建资产文件夹并添加 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;
}

plot.ly(dash_core_components) 滑块颜色变化

plot.ly(dash_core_components) slider color change

python

plotly

plotly-dash