Black Lives Matter. Please consider donating to Black Girls Code today.

Slide Box Color of Plotly RangeSlider

Is there any way to change the slide box color of plotly rangeslider?

Hi,

I could change the color of my rangeslider by adding those CSS rules:


.rc-slider-handle{
    border: solid 2px #333;
}
.rc-slider-handle:active {
    border-color: #333;
    box-shadow: 0 0 1px #333;
}
.rc-slider-handle:hover {
    border-color: #333;
}
.rc-slider-handle:focus {
    border-color: #333;
    box-shadow: 0 0 0 1px #333;
}
.rc-slider-track {
    background-color: #333;
}
.rc-slider-dot-active {
    border-color: #333;
}

Hope this helps

These class names did not work in my case. I am using dash 1.11.0.
However, after some inspection, I found that the slider handles are now drawn using “rect” with fill properties.

<rect class="rangeslider-handle-min" x="0" width="4" rx="1" fill="#fff" stroke="#444" stroke-width="1" shape-rendering="crispEdges" y="15" height="31"></rect>

I managed to change the handle colors using the following CSS rules:

.rangeslider-handle-min{
  fill: #92509F;
  stroke: #92509F;
}

.rangeslider-handle-max{
  fill: #92509F;
  stroke: #92509F;
}

Below is the image of resulting range slider handle.
FireShot Capture 115 - BI Reports - DyreID - 127.0.0.1