bootstrap-slider
bootstrap-slider copied to clipboard
seiyria
Touch Events Propagate to Page Scroll
Touch events are not stopped when trying to drag the handle of a slider, resulting in the page being scrolled before the slider can change. This makes it especially difficult for vertical sliders, where it's nearly impossible to change the value without the page scrolling first.
For a quick demo, take a look at this JSFiddle through your phone or using Chome DevTools (as explained in the fiddle).
It appears that the page-scroll event takes precedence over the slider (or the touch event isn't captured/stopped), since once you reach the top of the page, you can drag the slider down.
I've tried inserting some preventDefault()'s into the touchstart handler but to no avail. If anyone even knows of a quick work-around, I'd really appreciate it!
@PowerOfM we just published a new feature in v9.7.0 that may address your use case
https://github.com/seiyria/bootstrap-slider/blob/master/CHANGELOG.md#970--2017-01-05
Having the same issue for a horizontal slider in mobile devices. I see @powerOfM JSFiddle is using the 9.7.0 and this does not seem to be fixed. Are there any parameters to be set @rovolution ?
@Sroose nope 9.7.0 was just an implementation change, so it that didnt do the trick then this is still an outstanding issue. we would welcome a PR to fix it!
Since this was a blocking issue for me, I moved to 'nouislider' which works well across devices.
@Sroose I just found that this can be solved by adding the css property touch-action: none on the .slider class. More about touch-action here
This adjustment works with 9.7.0, but not with the latest release, 9.8.0. I didn't see any notes on changes to touch-handling in the changelog, so I'm not sure what broke.