New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug(mat-slider): Multi touch doesn't work as expected #22614
Comments
I did some further investigation of the touch events and their implementation in different browsers: https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches They seem both to be implemented in most browsers, except for InternetExplorer and Safari (does that mean, also other Webkit based browsers?) - So this would either need another strategy how to determine the right touch events or a fallback if those properties don't exist. |
…uch events `mat-slider` is set up so that it binds global `touchmove` and `touchend` events after dragging starts so that the user can drag while not keeping their finger right on top of the slider. The problem is that currently we only use the first touch from the list of touches which means that if the user is dragging more than one slider on a multi-touch device, they'll all have the same value. These changes add some logic that attributes the events to the slider that started the dragging sequence. Fixes angular#22614.
I don't think that the approach in the linked PR would work, because the I've submitted a fix at #22615 that matches the |
At least in chrome and firefox (android and linux), I didn't encounter issues with the 'target', even when I move the fingers away from the slider. I think that the target doesn't change during a touch chain (touchStart, n x touchMove, touchEnd/Cancel).
I tried a similar approach, it also worked, seems a bit more overhead and was not that stable at my side. BTW, is there a good guide, how to develop on this repository and use a development version in a project created e.g. with angular cli? |
I was testing it on an iOS device and it seemed like the target would sometimes be the event I was touching outside of the slider, but I think that the identifier would be a more stable solution anyway. Matching the identifier to a touch object does involve a linear-time search, but at the worst case, the list of touches will be 5 which is still quick to go through. As for developing locally, there's more information at https://github.com/angular/components/blob/master/DEV_ENVIRONMENT.md. |
thanks @crisbeto |
…uch events `mat-slider` is set up so that it binds global `touchmove` and `touchend` events after dragging starts so that the user can drag while not keeping their finger right on top of the slider. The problem is that currently we only use the first touch from the list of touches which means that if the user is dragging more than one slider on a multi-touch device, they'll all have the same value. These changes add some logic that attributes the events to the slider that started the dragging sequence. Fixes angular#22614.
…uch events `mat-slider` is set up so that it binds global `touchmove` and `touchend` events after dragging starts so that the user can drag while not keeping their finger right on top of the slider. The problem is that currently we only use the first touch from the list of touches which means that if the user is dragging more than one slider on a multi-touch device, they'll all have the same value. These changes add some logic that attributes the events to the slider that started the dragging sequence. Fixes angular#22614.
…uch events (#22615) `mat-slider` is set up so that it binds global `touchmove` and `touchend` events after dragging starts so that the user can drag while not keeping their finger right on top of the slider. The problem is that currently we only use the first touch from the list of touches which means that if the user is dragging more than one slider on a multi-touch device, they'll all have the same value. These changes add some logic that attributes the events to the slider that started the dragging sequence. Fixes #22614.
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
I'm trying to place several mat-sliders next to each other and be able to adjust them with multi-touch.
Problem is that, as soon as I start dragging a second fader, the fader gets the values of the other fader.
Reproduction
Use StackBlitz to reproduce your issue:
Steps to reproduce:
Expected Behavior
The value of the slider is adjusted independently
Actual Behavior
The second slider always has the same value as the first slider.
Environment
Investigation
I already figured out why this bug appears and made an attempt to fix it - which seems to work - at least in my use case.
The problem is, that on the touch events, there is no distinction if the event is for this particular fader or not.
With my PR, I'm adding a filter before those events and only choose the targetTouch that is relevant for that fader.
Here is the Pull request (first only against my own fork)
https://github.com/puschkin/components/pull/1
The text was updated successfully, but these errors were encountered: