bug(mat-slider): Multi touch doesn't work as expected

[puschkin]

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:

• Components: https://stackblitz.com/edit/components-issue-bvo7wp?file=src/app/example-component.html

Steps to reproduce:

1. open application (stackblitz, link see above) on a multi-touch enabled device, e.g. smartphone (I tried with android / chrome and on a multi touch screen on linux /chrome + firefox)
2. move first slider by touching it. don't lift the finger
3. move the second slider by touching it, also don't lift the finger

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

• Angular: 11.2.11
• CDK/Material: 11.2.11
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): ArchLinux, Android

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

[puschkin]

I did some further investigation of the touch events and their implementation in different browsers:
I am additionally using the targetTouches and the target properties of the TouchEvent.

https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches
https://developer.mozilla.org/en-US/docs/Web/API/Touch/target

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.

[crisbeto]

I don't think that the approach in the linked PR would work, because the target of the event is only going to match if the user's pointer is on top of the slider. We bind an event on the document so that the user can start dragging from the slider, but their finger can be moved away from it afterwards.

I've submitted a fix at #22615 that matches the touchmove and touchend event to the correct slider by looking at the unique ID provided by the browser.

[puschkin]

I don't think that the approach in the linked PR would work, because the target of the event is only going to match if the user's pointer is on top of the slider. We bind an event on the document so that the user can start dragging from the slider, but their finger can be moved away from it afterwards.

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've submitted a fix at #22615 that matches the touchmove and touchend event to the correct slider by looking at the unique ID provided by the browser.

I tried a similar approach, it also worked, seems a bit more overhead and was not that stable at my side.
I'll test and review your code!
Thanks for your fast reaction on that topic!

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?
My naive approach was to clone the repo, run yarn run build
Then go to my application and replace the @angular/material version in the package.json with file:/path/to/components/dist/release/material, but then, I got several compile issues.
First, I had to manually update all dependencies in my project , to match all peer-dependencies in the angular/material repo
then, I had errors when I ran "ng serve"
E.g.:
Error: [...]/components/src/material/slider/slider.css:1:10: Unknown word

[crisbeto]

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.

[puschkin]

thanks @crisbeto
Yes, probably you're right that the identifier is the better solution.
Sure, I also wouldn't see any performance issue there.