plot.ly(dash_core_components) slider color change

user_3054161 0
Viewed 8528

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.

enter image description here

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

plotly-dash plotly python
2 Answers

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;
}
user_14267850
Related