[Slider] The touch event is bubbled up to parent controls

[Anapher]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The slider should swallow the touch events to other parent controls cannot react to these events and to another action for the same interaction.

Current Behavior 😯

Currently, the events bubbles up to parent controls, which means that if the slider is inside a swipeable area, it will switch tabs instead of changing the value.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/7zz0209nr1

1. Take any control that listens and reacts to touch events
2. Place the slider inside
3. Try to change the value of the slider with touch gestures

Context 🔦

I'm building an app that has a simple tab control which is swipeable (as in the demo) and sliders inside to change settings. On mobile, it is not possible to use these sliders.

Your Environment 🌎

Tech	Version
Material-UI	v3.9.2
React	16.8.4
Browser	Google Chrome 72.0.3626.121 on desktop, Google Chrome on Android
TypeScript	3.3.3333

Addition

In Chrome on Windows, I get the error in the console, the same in Firefox.

react-dom.development.js:1575 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

I think that preventDefault() would prevent the bubbling of the event and maybe fix this bug and obviously it doesn't work.

Video

[Pajn]

The correct thing would probably be to apply touch-action: pan-x; or touch-action: pan-y; to the slider depending on the orientation, however I think that is a compatibility nightmare, so maybe it should always apply touch-action: manipulation; and call it a day?

[MalignantShadow]

According to the specification, I think putting a slider in a swipeable tab is discouraged.