[Feature Request] Allow styling of in-range vs. out-of-range marks / numbers inside `dcc.Slider / RangeSlider` using dash==4.0.0rc1

[huong-li-nguyen]

Hello,

I've been testing the new dcc components in Dash and first of all - thank you to the team for all the improvements! 🚀 We really love the new functionality. While trying to recreate our previous design from the old dcc components, I noticed that a few things are harder to style with the updated components, see another comment here: #3510 (comment)

I'm not sure whether this should be considered a feature request, or if I just don't know how to do it with the new components (very possible 😄). However, I wasn't able to find the relevant CSS selectors or documentation to solve it by myself.

What I'd like to have:

• Styling control over in-range vs. out-of-range marks and numbers:
  With the old Slider and RangeSlider, we could style in-range vs. out-of-range marks and numbers differently. I tried to reproduce this in the this PyCafe example, but couldn't get it to work. The previous version exposed specific classNames for styling out-of-range elements, but I couldn’t find equivalents in the new components.

  This is the kind of styling I'd like to have:

  

• Dots positioned above the track + customizable colors:
  I’m not sure if this is intentional, but the dots/marks aren’t sitting on top of the track by default. I had to add custom CSS to position them correctly in the PyCafe example. It would be great if this was the default behavior — and even better if their colors could change depending on whether they’re in or out of range. I couldn’t get that part working either, see PyCafe example

  

For example:

• The out-of-range numbers and dots would need to have a different color
• The dots should be automatically placed on the slider track (currently doing custom CSS to achieve that)

[KoolADE85]

@huong-li-nguyen thanks again for your feedback!

1. This is a great point. I will add a CSS class to markers which fall outside the selected range.
2. Funny enough, we already have an obscure dots=True prop which should do exactly this.