plot.ly(dash_core_components) slider color change

问题

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.

回答1:

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!

回答2:

See the answer by Taylor Olson and the documentation referenced in there. As outlined in the documentation: Create an assets folder and add your css file. Then instantiate your app using:

app = dash.Dash(__name__)

See example css code below to change the color of the slider to red (update the color as required):

.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;
}

来源：https://stackoverflow.com/questions/44943464/plot-lydash-core-components-slider-color-change