Suggested Improvements to Preset Slider (things like Margin/Padding) around no value and zero value

[MadtownLems]

What problem does this address?

There are several issues around the preset slider, for things like Margin/Padding. Some are new with 6.4, and some have existed previously but are worth taking a look at.

A lot of the issue is around the default state of the slider being positioned at the left, and explicitly dragging the slider to 0. Take a look at the following screenshot. The top/bottom has not been touched, and should use my theme's default settings. However, I explicitly dragged left/right to 0. There is zero visual indication that one of these has been set to 0 and one is the theme's default.

You can investigate the markup to confirm:
wp:columns {"style":{"spacing":{"padding":{"right":"0","left":"0"}}}}

You can also see that one has no value, and one has a value of 0, if you toggle away from the presets:

Note that, before 6.4, if something was set to 0, it would explicitly indicate that in the UI. That seems to have stopped happening in 6.4. This is very confusing to know if something has been marked 0, or untouched.

Related, and this has been the case as long as presets have existed: Might it be possible to not have the 'dot' on the slider at all, until a value has been set? When the 'dot' is to the very left of the slider, I think it implies a value of 0. We are frequently explaining to our content providers that there is a difference between touching the dot and sliding it to the left to get a value of 0, vs not touching it at all (even if the dot doesn't move). I think that if the dot wasn't present at all on the slider, until a value was set, that would clear up a lot of confusion.

What is your proposed solution?

As mentioned above, I think the best solution is probably to not even have the 'dot' on the slider when a value hasn't been set. Failing that, at least clearly show a difference between no value set and the leftmost value set.

[cbirdsong]

Related:

• Resetting block controls to their default state is often unintuitive and is sometimes impossible #55258
• Similar UI controls have very inconsistent behavior around defaults #47976

[ndiego]

dot-state.mp4

Here is a little video with some more context.

[mrfoxtalbot]

+1 This is a recurring pain point when talking to users.

[daviedR]

+1

I think in the no value UI, the bullet could be hidden, or set to a more subtle color (e.g. gray). However, gray usually represents a kind of disabled state.

[richtabor]

Note that, before 6.4, if something was set to 0, it would explicitly indicate that in the UI. That seems to have stopped happening in 6.4. This is very confusing to know if something has been marked 0, or untouched.

I don't recall this being the case. What was the zero state previously?

[richtabor]

I think in the no value UI, the bullet could be hidden, or set to a more subtle color (e.g. gray). However, gray usually represents a kind of disabled state.

Maybe the black color we use, where a colored circle indicates a value. Could be odd though.

[MadtownLems]

I don't recall this being the case. What was the zero state previously?

I set up a 6.3 instance to take a look, and I think you're right; I believe I was mistaken.

However, the current state is still incredibly clear and needs improvement. There needs to be clear distinction between "default/not-set" and "explicitly set to zero"

[richtabor]

However, the current state is still incredibly clear and needs improvement. There needs to be clear distinction between "default/not-set" and "explicitly set to zero"

Agreed. Just double-checking this wasn't a regression. :)

[daviedR]

What if the "default / not set" state will have no bullet in the slider? So only a slider bar with the stepping marks.

This might be uncommon practice on a range slider UI though.

[mrfoxtalbot]

What if the "default / not set" state will have no bullet in the slider?

I appreciate the outside-the-box approach, @daviedR but that still sounds confusing. :/