bug: ion-range should not update value or lock scrolling until touchEnd or drag within the bar

[cmaas]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

If you click/tap on an ion-range component somewhere on the bar (not on the knob), the knob will immediately jump to the place where you clicked or touched down. See video. The circle indicates the beginning of a click (onTouchStart):

This is "too sensitive", because it causes accidentally changing the ion-range value if the user just wants to scroll in some cases. In my app, there are several ion-range elements further down on the screen that get accidentally changed if the user merely wants to scroll.

On native iOS 17 and Android 14 UI elements, the behavior is different: if you touch down on the knob, you can start dragging it. But if you touch down on the bar somewhere else, the knob will move there only "onTouchEnd" when you lift your finger. This reduces the sensitivity of this element and prevents accidents. Furthermore, the value of the element will only be changed if you lift your finger while it's still hovering over it. If you touch down on the bar and move your finger somewhere else while keeping it touched down, the parent view starts to scroll vertically (most of the time at least).

The behavior is pretty consistent between native iOS and Android elements and feels quite off in Ionic.

Expected Behavior

ion-range should mimic native behavior and trigger value adjustments only "onTouchEnd" and only, if the finger is still over the component. If the user touches down on the bar, but moves the finger to another place on the screen and lifts the finger there, ion-range value should not be changed.

Steps to Reproduce

1. Sample code that gives you some vertical scrolling around ion-range.
2. Consider the audio settings on a real iOS or Android device to get a feeling for how a native range input should behave.

Code Reproduction URL

Here

Ionic Info

Latest via CDN

Additional Information

No response

[averyjohnston]

Thank you for the report! Looking into this, I agree that the experience could be improved. I've tested with the Volume settings on my Android device (video below) and come to the same conclusions as you. To summarize:

1. If the bar is tapped outside the knob, then released without dragging, the value only updates on touch end. (Ionic currently updates immediately on touch start.)
2. If the bar is tapped, but not dragged, the view can still be scrolled. (Ionic currently locks scrolling immediately on touch start.) At this point, if the touch is lifted while no longer on the range, the value is not changed.
3. If the bar is tapped, then dragged, the view cannot be scrolled until the knob is released. (This matches current Ionic behavior.)

This isn't shown in the video, but I noticed that item 2 also applies when tapping directly on the knob.

https://github.com/ionic-team/ionic-framework/assets/90629384/4ea10495-321a-4a8f-b6da-f7c97fb816de

[fudom]

This behavior makes the ion-range component impossible to use in a scrolling context. You can only use it on a static page or dialog where you are sure you will never be able to scroll. Otherwise, you'll provide a really bad UI/UX that will result in angry users. This component does not appear to be suitable for mobile devices with touch, as the rest of the framework suggests. No offense. Native HTML range input has similar behavior and changes values when scrolling. At least in an Ionic Cordova app on Android. But the native range slider (not HTML) works better for mobile device. I'm not sure how to implement it exactly. We could reverse engineer it by observing the behavior. For example as we see in the video above. It would be great if we could fix that bug.

Ionic 6: Demo Ionic 7: Demo

Tested in mobile device view of Chrome DevTools.

Read more: #28844

[domske]

I created a range slider that is optimized for touch. Matching the behavior shown in the video of @amandaejohnston (post). Should we change the range component in this way? It's maybe too special (not MD). With my solution, you can't even move the knob without long-pressing it, which I personally prefer. Anyway, it's nice to see a PR on this issue. I haven't checked that yet. Currently no time. However, my change would be more of a redesign than a small bug fix. We could offer the option to only allow interactions via long press. Whatever solution we choose, it should be optimized for mobile devices (touch), like Ionic is. Scrolling should be safe, even if the user touches the element while scrolling.

Here is a Demo if you want to see it in action. Tested on Android and Chrome DevTools mobile view (touch).

[thetaPC]

Thanks for the issue! This has been resolved via https://github.com/ionic-team/ionic-framework/pull/29005 and will be available in an upcoming release of Ionic.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.