Bootstrap Style Matched Sliders

[mmarras]

This is more a question than a feature request.

#297 suggests, that Bootstrap themed sliders exist/existed.

However, the question is how to apply the styling to the dcc.Slider? Bootstrap does not have a slider component, so it is comprehensible that it is not listed under components in the documentation. Then on the other hand, from a Dash viewpoint, it is arguably a rather central one.

So the feature request would be to either improve the documentation on how to give the sliders a matching style if this is already possible, or to create a dbc.Slider component.

---

As a workaround for others potentially landing here, you can get the styling via a custom CSS:

Place the below css file in to assets/mycssfilename.css to get the basic Bootstrap5 primary colorstyle.

/* styles.css */

/* Customize the slider handle */
.rc-slider-handle {
    background-color: var(--bs-light); /* Handle color */
    border: 2px solid var(--bs-primary); /* Border color for the handle */
}
.rc-slider-handle:hover {
    border-color: var(--bs-primary);
}

.rc-slider-handle:active{
    border-color:var(--bs-primary);
    box-shadow: 0 0 5px var(--bs-primary);
}

/* Customize the slider track */
.rc-slider-track {
    background-color: var(--bs-primary); /* Track color */
}

.rc-slider-dot-active{
    border: 2px solid var(--bs-primary); /* Border color for the handle */
}

/* Customize the slider rail */
/* .rc-slider-rail { */
    /* background-color: var(--bs-light); Rail color */
/* }  */

.rc-slider-handle-click-focused:focus{
    border-color:var(--bs-primary);
}

[AnnMarieW]

Hi @mmarras
Styling other Dash components and figures with a Bootstrap theme is a challenge, and that's what inspired me to make this Dash Bootstrap Theme Explorer site and the Dash Bootstrap Templates library.

However, it looks like your CSS skills are a lot better than mine. Would you like to collaborate?

For example, here is a link to sample app with sliders and light and dark theme switch on PyCafe. It's editable, so it would make collaborating on this and other components pretty easy. https://py.cafe/amward/dcc-sliders-bootstrap-theme

Update: If you tried pycafe link earlier and it didn't work, try again - I just fixed it :-)

My version of the CSS is included with a .dbc class, so you can see the difference if you un-comment the className="dbc"

The only thing I'd add to yours is styling the focus ring when dragging:

.dbc .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

I've also struggled with making the slider rail look good in both light and dark themes (across all themes). For example, I think it's a little bright in dark themes vs light. Any ideas?

There are several ways to proceed based on what @tcbegley would like to do. Perhaps a link to a PyCafe from the docs would be helpful -- people typically like to fine tune the CSS.

It would also be cool to have a link from the dbc library, so you could do something like

app = Dash([external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.themes.DASH])