Rework range input so track is easier to click

[samanpwbb]

Breaking this out from #963 as it's own issue. Current range input is impractical because clicking the thin range track requires a lot of precision. We could either stick with the same visual design but make the click area for the track larger, or update the whole design.

[adrianababakanian]

Looking into this further, it seems like I am able to move the range thumb by clicking anywhere inside the parent container, i.e. not directly on the track itself. It's not the clearest in the below screen recording, but you can notice how the thumb responds to clicks within the container div even if the cursor doesn't change to a pointer (which happens when directly on the range track line).

Screen.Recording.2021-04-09.at.2.55.28.PM.mov

So, should we consider making the parent container larger (which would affect the height of the element)?

Extending the clickable area beyond the height of the range thumb itself when there are no visible boundaries around the target area starts to feel a bit unexpected to me, especially when considering the element's use in smaller spaces.

From discussion earlier this week, it sounds like we're in favor of sticking with the line-based track design rather than something with boundaries, like:

tl;dr, if we're not going to move away from a line track to a visually bordered track space, I wonder if the current behavior actually makes the most sense given the track design?

[adrianababakanian]

cc @samanpwbb , I'd be curious to hear your thoughts on ☝️ if you have any feedback!

[samanpwbb]

cc @samanpwbb , I'd be curious to hear your thoughts on ☝️ if you have any feedback!

Oh, I'm glad you dug into this. From these videos, I think the best move is probably to only slightly adjust the style of the range input, based on figma styleguide, rather than totally redesign it. I think the main change is to make the drag handle border 1px rather than 2px.

We should also look into an active state while you're doing this (#889)

[adrianababakanian]

I think the main change is to make the drag handle border 1px rather than 2px.

Sounds good, thanks for taking a look!

We should also look into an active state while you're doing this (#889)

Agreed, I'll go ahead and open a PR for these changes to the range input.

[adrianababakanian]

@tristen made a good suggestion -- we could update the cursor to be a pointer instead of default cursor when it is within the existing clickable container div area, to make it clearer that a user can successfully click off of the track itself to change the thumb position.