bug: scrolling should not cause range to move

[fudom]

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

• v6.x
• v7.x

Current Behavior

If you have ion-range in a scrolling container, the range is changed when you trying to scroll. If an ion-range is in a scroll container, the range will change when you want to scroll. That's really annoying. You don't want to change any value, when you only want to scroll.

Expected Behavior

Scrolling should be possible without changing the range.

Steps to Reproduce

In my case, I have a popover with a list of input items and a range included. When try to scroll. See code link below.

The weird thing is, that every implementation with the same Ionic version works a bit different. In my app, when you try to scroll and hit the range at beginning, the scrolling is completly blocked and instead the range is moving. In Stackblitz example, scrolling and range moving is at same time. But anyway... I looking for a solution to block accidentally value changed by range on scrolling. Currently I thining about toggle enable/disable with a click on a range. Maybe not the best UX but better than unwanted changes. What do you think?

DL;TR: The range should not move when a container is scrolled. (touch)

Code Reproduction URL

Ionic 6: https://stackblitz.com/edit/ionic6-angular14-4cu2m9?file=src%2Fapp%2Fapp.component.html Ionic 7: https://stackblitz.com/edit/ionic7-angular14-6rxgf7?file=src%2Fapp%2Fapp.component.html

Again: In my app: When I try to scroll, the scroll is blocked and only the range is moving. I don't know why, but it does not really matter. This is also not wanted behavior. How to prevent the range from moving during scrolling?

Ionic Info

v6-lts and latest (v7) ng-v14 - tested in Chrome, Windows (ionic info does not work in my repo.)

Additional Information

Ref: #19004

I also tested the native range slider from HTML <input type="range" />. They have the same behavior. This is one of the worst UI/UX I've ever seen. It's similar like a dropdown input which changes its value on mouse scroll wheel. I don't understand these decisions...

[mapsandapps]

Thank you for submitting this issue. I'm going to close this as a duplicate of #28487.

[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.