[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

[camdecoster]

Thanks for the feedback! We'll take a look at your suggestions.

[AnnMarieW]

@petar-qb If the step is an integer, I don’t think values with decimal are valid. So this might not be a bug?

[petar-qb]

Thanks for the feedback! We'll take a look at your suggestions.

@camdecoster thanks! 🚀

If the step is an integer, I don’t think values with decimal are valid. So this might not be a bug?

Hey @AnnMarieW, here's what I get for the following configuration:
dcc.RangeSlider(min=10.5, max=150.5, step=10, value=[10.5, 150.5]),

You can see how the max numeric input is partially cut off. When step property is float instead (e.g. step=10.5) everything looks good.

[AnnMarieW]

@petar-qb
Yes, I see that the formatting looks off. I thought that if the step was an integer then the values should also be integers. But it looks like a different bug. For example, if you start at 10.5 and move the slider handle, the value becomes 21. If you enter 20.5 in the input, when it loses focus, the number is rounded by the step and becomes 21. But it also give an error message on hover that it's an invalid number:

---

Workaround:

In the meantime, if valid numbers are things like 10.5, 20.5, 30.5 etc, then you could set custom marks step=None to restrict to those marks only.