BUG: Mobile page scrolling has unexpected behaviour when dragOnClick is enabled

[kalnode]

If you enable dragOnClick, it allows the user to click/tap anywhere on the slider bar and drag to a new value. This works great and it seems like the most intuitive thing.

PROBLEM:

However, on mobile, a side effect is that if you are swiping the page up and down (to see additional page content), and accidentally land your finger on a slider bar (assume a horizontal slider bar), the page scrolling does not occur on that finger swipe (up or down), and instead the user is moving the slider. This is unexpected and against the users' desire in that moment.

You can see it occur on the demo for dragOnClick: Scroll all the way to the bottom of the page, and pretend you want to scroll back up the page. If on of your swipe touches initially lands on the slider with dragOnClick, you are now dragging the slider and not scrolling the page. Additionall, it doesn't make sense because I'm swiping vertically, while the slider is horizontal. https://nightcatsama.github.io/vue-slider-component/#/basics/simple?hash=dragonclick

I came across this problem because an app I work on has 3 sliders in a stack and it's easy for a finger to land on a slider when attempting to scroll the page.

Possible solutions?

1. Detect swipe direction, and ignore it if it's perpendicular to the slider.
2. Add an optional delay before dragging engages, x seconds. For instance: 'dragOnClickDelay: 50' (ms). So for people who care about this, they have a tool to use to mitigate, maybe.

In any case, if it's useful, I use this snippet in a production app to detect swipe direction; works great even on iOS et al. https://stackoverflow.com/a/69617795/4378314

[blackjak231]

@NightCatSama Any timeline on this ? (I admit i have no time at all to fix this)