plot.ly(dash_core_components) slider color change

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!


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