search

airbnb / rheostat

Rheostat is a www, mobile, and accessible slider component built with React
MIT License
1.69k stars 189 forks source link

Add Touch Events to Callbacks #269

Open lightninglu10 opened 4 years ago

lightninglu10 commented 4 years ago

This PR adds touchevents to the onSliderDragStart callback. This is useful so we can control touch events through rheostat.

An example would be blocking rheostat from scrolling vertically on mobile while it's dragging. Currently if a user uses our rheostat component on mobile, they can drag the slider and scroll the page at the same time.

Also added the current passive: false touch listeners to remove the warning from chrome.

albertstill commented 4 years ago

Be interested to know how Airbnb solve vertical scrolling issues, seems they use the exact same component as open source, I checked their source. They stop vertical scroll of the page when the user is sliding the slider horizontally, but they also allow a vertical scroll of the page if the user touches the handle accidentally when scrolling vertically.

ezgif-6-64b34f92b1cb

albertstill commented 4 years ago

I think Airbnb stop vertical scrolling with touch (if the initial movement is horizontal) for the whole of their filters modal.

@lightninglu10 I fixed it for my site doing touch-action: pan-y on the handle, worked well and has pretty good browser support. Maybe Airbnb should consider adding this css decl to this repo.