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

Posted 2023-02-16

【中文标题】plot.ly(dash_core_components) 滑块颜色变化

【英文标题】：plot.ly(dash_core_components) slider color change

【发布时间】：2017-12-10 03:21:14

【问题描述】：

我昨天第一次遇到 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 的默认滑块的颜色（或样式）？提前谢谢你。

【参考方案1】：

你需要用 css 来改变它。

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

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

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

最后，将必要的 CSS 添加到您的样式表中。

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

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

希望这会有所帮助！

【讨论】：

真的很有帮助！谢谢。

这会改变背景颜色，但不会改变所要求的天蓝色滑块的颜色。

我将它添加到我的 Css 文件中，但没有任何反应。 “然后，只需检查您的仪表板应用程序的网页，并找到滑块的类名及其组件。”我能做到多少？

【参考方案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;

【讨论】：

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

是的！那应该是rc-而不是rc。感谢您指出@felice

我将它添加到我的 Css 文件中，但没有任何反应。 “然后，只需检查您的仪表板应用程序的网页，并找到滑块的类名及其组件。”我能做到多少？