Slide Box Color of Plotly RangeSlider

plotly.js
1

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

2

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

3

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