plot.ly(dash_core_components)滑块颜色变化 [英] plot.ly(dash_core_components) slider color change

问题描述

我昨天第一次见到plot.ly破折号，并创建了一些交互式剧情.并且我添加了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虚线的默认滑块的颜色(或样式)?预先谢谢你.

解决方案

您需要使用CSS进行更改.

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

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

然后，只需检查您的dash应用程序的网页，然后找到滑块及其组件的类名即可.

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

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

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

希望这会有所帮助！

I've met plot.ly dash yesterday for the first time and created some interactive plot. And I added dash_core_components.Slider() object like below code.

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

I've read help(dcc.Slider) but I couldn't find the way to change the skyblue color of my slider below.

So my question here...Is it possible to change the color(or style) of default slider of plot.ly dash? Thank you in advance.

解决方案

You need to change this with css.

First, let your dash app know that you will be hosting your css externally.

Documentation here: https://plot.ly/dash/external-resources

Then, simply inspect the webpage of your dash app and find the class names of the slider and it's components.

And finally, add the necessary css to your style sheet.

For example, I changed the color of a disabled slider by adding the following code to my externally hosted css file...

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

Hope this helps!

这篇关于plot.ly(dash_core_components)滑块颜色变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！