[Visual Request] Suggestions for improving default slider styling in dash=4.0.0

[huong-li-nguyen]

Hi!

First off, thank you for the great work on the redesigned Dash components - they look great overall! 🥳

While using the updated sliders, I noticed a few small visual details that might be worth reconsidering in the default styling. None of these are major issues, and we've been able to address them with custom CSS on our end, but I wanted to share the feedback in case it's helpful :)

• Here is the example app with the environment: https://py.cafe/huong-li-nguyen/dash-slider
• Using dash=4.0.0

1. Slider track and dot opacity

The current opacity applied to the slider track and dots makes them feel slightly visually disconnected. Removing the opacity (or assigning a different color) might help the elements feel more cohesive as a single component.

In our case, we worked around this by overriding the Dash CSS variable with a different color. However, it might be worth considering whether the default styling could achieve this more naturally.

2. Dot alignment

The slider dots don’t appear to be perfectly center-aligned with the track when using dots=True- they look slightly offset on close inspection (see screenshot). We corrected this with custom CSS, but it may be worth adjusting in the default styles to ensure precise alignment.

3. Start and end dot positioning

This one is more subjective, but it might look cleaner if the first and last dots were positioned exactly at the start and end of the track, rather than slightly inset.

Here the start and end point are positioned right at the edge of the track:

Currently the start/end dot are positioned slightly inset:

Would any of these adjustments be feasible in the default styling?

Thanks again for all your work on this - we really appreciate the improvements! 🫶

Best,
Li

[petar-qb]

Hey Dash team 👋 Thank you again on amazing dcc improvements introduced in V4 🚀

While I was playing with different configurations for sliders components I found a few inconsistencies that might be worth fixing:

1. A dcc.RangeSlider component renders as a dcc.Slider when the "value" property is not explicitly specified.
2. When sliders min and max are float, and the step is integer, the numeric input component is partially cut off. I guess it happens due to "inaccurate" calculation of X in the width: calc(Xch + calc(var(--Dash-Spacing) * 2)).

You can find the examples at -> https://py.cafe/petar-qb/dash-v4-sliders-issues