plot.ly(dash_core_components) slider color change

Question

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.

Answer 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!