[css-forms-1] Rework default styles for slider-like controls

[nt1m]

I think we might want to do these changes:

• input type range track should be smaller than the thumb
• thumb should be round
• switch should probably get border-radius by default

I think this will make the base appearance styles for the slider easier to customize by default, since developers won't have to override the track to make it smaller, or set the border-radius of thumb.

cc @lukewarlow

[nt1m]

cc @jensimmons @fantasai

[jensimmons]

We should make these controls look like real, working controls.

Design Principle 2:

The controls are recognizable and usable on their own without additional styles.

Right now, they are very hard to understand. They do not look like typical UI.

[lukewarlow]

I definitely agree we probably want border radius on the thumb both for range and for switch (as well as probably switch's track/container). As for whether the thumb is larger than the track or not for range I'm fairly agnostic but if it helps make them more identifiable than I'm in favour.

[jensimmons]

We could easily design something simple, elegant, very easy to use, generic enough to blend into any website. To do so, we'll probably use border-radius and box-shadow and lot of other CSS.

Conversely, another design principle is:

The styles are easily adapted to the website’s branding, without needing complex reset stylesheets:

• They use minimal code and are easy to override.
• They do not have a strong voice & tone of their own, and are visually as simple as possible.

This principle does make folks believe we should not use rounded corners and drop shadows, that it's better to leave things unstyled — even if they look raw.

I'm hoping we can thread the needle, but this does raise a question:

If we do use some CSS to give the default some good & useful styling, but that requires developers to override it to apply their own styles (removing a drop shadow for instance), is that putting too much of a burden on the developer???

Thoughts?

[tabatkins]

I agree that "minimal" doesn't have to mean "literally the absolute minimum that makes it not broken"; there's room to do a little bit of styling so it's usable. We want to be careful, because every property we add is another thing authors have to deal with, but I think a border-radius and possibly a box-shadow is likely fine. It just needs to be things that are obvious to spot, and obvious what element and property to target to revert it.

[nt1m]

I don't think I agree about adding box-shadow, because it's the kind of thing that can become an annoyance to override. Many designs trends over the years have not used box-shadows, and it is the kind of thing that can become true again in the future, despite not being true today.

For border-radius, the reason I think it's OK for some controls like sliders, is because not having it is probably more painful for authors than helpful, since they'll have to add it more often than remove it. That may be in part due to current design trends but I've rarely seen range inputs or switches that don't look rounded.

[kbabbitt]

Another thing about shadows is that they introduce a filter effect and thus push into a different class of performance characteristics. We might not want to default a "basic" set of controls into that. (This would of course not be a concern with a shadow whose blur radius is 0.)

[lukewarlow]

My instinct is that border-radius is okay, box shadow probably isn't but there's nothing concrete backing that. I guess they're harder to make nice in dark mode for example, so if it's something that might be problematic in a common usage then we shouldn't use it.

I completely agree we should make the controls recognisable and usable without pushing a strong design opinion on users.

[myakura]

If we change the shape of the slider thumb to circular I want the center line to point the value. In the current default style the right edge of the thumb indicates 50%; i think it's okay with rectangular thumbs, not sure it works with circular thumbs.

[lukewarlow]

Would something like this be closer to what we're looking for (only looked at switch so far)?

I still think we might need state indicators (or an easy way for authors to add them)

[nt1m]

Yeah that's a lot better, it would be good if we could define the positioning of the checked/unchecked thumb too.

[lukewarlow]

Okay I'll draft a PR for the necessary styles for that (including positioning)

[lukewarlow]

@nt1m A question that comes to mind on this, does a switch generate a ::slider-fill pseudo element? The spec currently suggests yes, but I think the prototype in WebKit doesn't generate one.