search

mapbox / assembly

Making the hard parts of designing for the web easy.
https://www.mapbox.com/assembly/
134 stars 27 forks source link

Rework range input so track is easier to click #980

Closed samanpwbb closed 3 years ago

samanpwbb commented 3 years ago

Breaking this out from https://github.com/mapbox/assembly/issues/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 commented 3 years ago

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).

https://user-images.githubusercontent.com/15935667/114244791-fa87e280-9943-11eb-819a-58946a120666.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:

image

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 commented 3 years ago

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

samanpwbb commented 3 years ago

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 (https://github.com/mapbox/assembly/issues/889)

adrianababakanian commented 3 years ago

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 commented 3 years ago

@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.