Alternative styling for disabled range-slider

[ollimeier]

Fixes #1341

const sliderDisabled = false; //true; -> this is a hack to change the axis sliders to the disabled version

The following screenshot shows the original style of the range-sliders:

The following screenshot shows a possible alternative styling for the disabled range-sliders (together with number and label):

[ollimeier]

And the same comparison for dark mode: Default:

Disabled:

[ollimeier]

For demonstration I looped through all axis a second time and displayed them as 'disabled range-sliders'. I hope this give you a better impression. I like your feedback 'leave out the outline for the numeric value completely' a lot. It's much better now:

[justvanrossum]

Looking very good. I would like the vertical spacing to be quite a bit tighter, though.

[justvanrossum]

Suggestion for the mockup: instead of looping through all axes, just duplicate each axis with a disabled version of itself.

[ollimeier]

Looking very good. I would like the vertical spacing to be quite a bit tighter, though.

Hi Just, I am not sure how to make the vertical spacing a bit tighter without changing the overall design of the axis in this panel. As you can see in the following screenshot there is a gap in between all rows. The gap is set to gap: 0.4em;. We can change this gap value, but it will have an effect to the general design of how the axis are displayed in this panel. Why I have not touched it yet. Any ideas or suggestions are very welcome.