CODEWITHSUNDEEP
angularjsionic-framework
Ritesh Jagga
Ritesh Jagga

Reputation: 1442

ionic range input prevents scrolling

I have bunch of sliders stacked vertically in my application. When I tap on the slider with an intention to scroll down or up, it changes the slider value instead of scrolling.

See a demo of the issue.

The following are the discussions among community members but I found nothing helpful there:

  1. This reported issue which is same as this question but somehow author is convinced upon using angular-js-slider library and looks like it works for the author. I tried this library and issue is still the same.

  2. Reported issue with all input elements and not just range input. May be this resolved the issue with other input types like "text" but not for range input.

Can anyone help with this?

Upvotes: 3

Views: 823

Answers (1)

Ritesh Jagga
Ritesh Jagga

Reputation: 1442

On web, scrolling is definitely not an issue but on mobile devices, the entire horizontal span of the slider acts as a barrier to scroll.

Since I was looking for the solution in mobile context, disabling the track for any mouse event looks sufficient to me and this can be achieved through pointer-events, at least on chrome.

input[type=range] {
  pointer-events: none;
}

input[type=range]::-webkit-slider-thumb {
  pointer-events:auto;
}

The answer posted here has been contributed earlier here.

Upvotes: 2

Related Questions