plot.ly(dash_core_components)滑块颜色更改

时间:2017-07-06 08:21:33

标签: python plotly plotly-dash

我昨天第一次见到了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)但我无法找到改变下方滑块天蓝色的方法。

enter image description here

所以我的问题在这里......是否可以更改plot.ly dash的默认滑块的颜色(或样式)?提前谢谢。

2 个答案:

答案 0 :(得分:7)

您需要使用css更改此内容。

首先,让您的破折号应用程序知道您将在外部托管您的CSS。

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

然后,只需检查您的短划线应用程序的网页,找到滑块及其组件的类名。

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

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

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

希望这有帮助!

答案 1 :(得分:0)

请参阅Taylor Olson的答案以及其中引用的文档。如文档中所述:创建一个资产文件夹并添加您的css文件。然后使用以下实例化您的应用:

has_one

请参见下面的示例css代码,将滑块的颜色更改为红色(根据需要更新颜色):

app = dash.Dash(__name__)