Don't block scrolling when the direction is perpendicular to the slider

Issue

Touch scrolling is prevented when the initial touchpoint is on a noUiSlider:

Proposal

1. Store the touchstart coordinates
2. Wait till the touchmove is a set distance away from touchstart - maybe 3vh, or some configurable value
3. If the direction is perpendicular to the component, stop blocking the scroll event until touchend

Alternatively, on step 3, you could start blocking the scroll event if parallel to the component

[lukaskabrt]

Solution that works for me:

• set touch-action: pan-y CSS style on the slider
• set behavior: none in the slider initialization - users can’t tap the slider to set its value, but it prevents them from accidently changing the slider value while scrolling

[leongersen]

noUiSlider currently uses touch-action: none to guarantee the page doesn’t scroll when using a slider. You could change that to touch-action: pan-up pan-down (etc.) for horizontal sliders, with left/right for vertical. That’s not a change I think is smart: any touches near the slider shouldn’t be at risk of glitchy behaviour, such a page scroll. Safari doesn’t support these properties anyway, so the benefit is small.