[slider] The slider controls margin makes it harder to implement click logic correctly.

[adixon-adobe]

Description

I'm opening this out of adobe/spectrum-web-components#653 as this makes it harder to properly implement the slider, leading to bugs where you can't actually click to the edge in implementations.

Expected behavior

No margin in the controls so the width matches the actual track width. If this is harder to fix, it'd be good to have some additional advice on the doc pages for implementations.

Screenshots

synced to jira: https://jira.corp.adobe.com/browse/CSS-217

[lazd]

IIRC this is done because we need to be able to drop the slider off the edge of the track, and we don't want the handle to overlap things.

This could be done differently, but I believe it would cause complications in how the handles are positioned. Perhaps wrap the slider itself in a div and listen for clicks on that?

[GarthDB]

I just checked in with @badimon - We shouldn't have the margin. It isn't super clear in the design docs, but the edge of the handle should go to the edge of the track.

[GarthDB]

Like @lazd mentioned, it was done intentionally at first, but design ended up going with a different decision.

[adixon-adobe]

And just to make sure I don't cause additional confusion, the handle really does go to the edge of the track, it's just that because of the margin, it's easy to lose click events at the very edge of the track.

[pfulton]

@adixon-adobe Is there a place where we could verify if this is still an issue? We can check again with design folks and fix if it's still an issue.

[adixon-adobe]

Here's a screenshot of some of the override css we have in place for the web component (which probably has a touch more than needed for this issue). My hunch looking at the Spectrum CSS site is that this will still be an issue, because the controls are not the full width of the track. I won't have time to confirm directly for at least a few weeks though.