Clean-ish way to prevent content scrolling when sliding <ion-range>

Perhaps there is a better way to address this directly through the ionic APIs provided, however in my searches I wasn’t able to find much.

My issue is that when you slide the range slider, if you move vertically it will also scroll the page with your thumb.

My solution prevents the page from scrolling, allowing only the slider to move horizontally, while the page remains still.

HTML:
<ion-range (touchstart)="preventScroll($event.target)" (touchend)="allowScroll($event.target)"></ion-range>

Component:

  preventScroll(ele: Element) {
    const content = ele.closest('ion-content');
    if (content) {
      content.style.setProperty('--overflow', 'hidden');
    }
  }

  allowScroll(ele: Element) {
    const content = ele.closest('ion-content');
    if (content) {
      content.style.setProperty('--overflow', 'inherit');
    }
  }

Just figured I would contribute the solution since I found sparse answers online directly related to this functionality. I had also attempted to bind to the touchmove event and use the event.preventDefault() method to stop the page. This worked, but was less reliable than touchstart and touchend.

4 Likes