Prevent interaction with slider inputs when scrolling on mobile

Need help Mobile
1

I have a bunch of horizontal slider inputs on my site, but when someone views it in mobile, it’s way too easy to accidentally scroll a slider when you’re trying to scroll the page.

I have found a potential JS solution, but I cannot find how Bubble disables elements in the UI, which could be targeted by the script. As far as I can tell, the only visible changes in the HTML are disabled classes, but all they do it change the look of the control - something else is disabling it.

Any help would be greatly appreciated - either utilising the JS solution or another one.

Here’s a link to the possible solution (of course requiring changes to meet Bubble’s implementation of disabled fields)

2

While not a perfect solution, I was able to get a good enough result by adding the following HTML/CSS to an HTML element:

<style>
 .ui-slider {
   pointer-events: none;
 }
 span.ui-slider-handle {
   pointer-events: auto;
 }
</style>

Therefore restricting slider adjustment to only when the slider is moved, rather than clicking anywhere on the ‘line’