ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

refactor(range): update value on touchEnd or drag

Open thetaPC opened this issue 1 year ago • 0 comments

Issue number: resolves #28487


What is the current behavior?

There are two behaviors that need to be addressed.

  1. The range value is updated when the gesture onStart event is fired. This can lead to the values being accidentally updated when the user is scrolling on the view. The user might tap on the range to scroll on the view, but the range value is updated instead.

  2. The component prevents the view from scrolling while the user has touched any part of the range. The user might want to scroll and they happen to touch the range. This can lead to the user feeling disoriented because they can't scroll on the view anymore.

These behaviors do not follow the native behavior of mobile devices.

What is the new behavior?

  • The range value is updated on touch end or when the knob is being dragged.
  • The view can be scrolled while the user is not dragging the knob.
  • A new variable isScrollingView is used to determine if the user is scrolling on the view regardless of whether the user is dragging the knob or not. This determines what logic to apply.
  • The pressedKnob variable is no longer being set in the onStart event. It is now being set in the onMove and onEnd events. (the reason behind this can be found within the newly added comments)
  • The initialContentScrollY variable is no longer being set in the onStart event. It is now being set in the onMove event. (the reason behind this can be found within the newly added comments)

I did not change the behavior of the range when the user is dragging the knob. The view should not scroll while the user is dragging the knob.

Does this introduce a breaking change?

  • [ ] Yes
  • [x] No

Other information

The new behavior aligns with the native mobile devices.

thetaPC avatar Feb 08 '24 22:02 thetaPC