[Slider] Prevent dragging Slider knobs by it's labels

[nikkizol]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I have Slider which acceptsValueLabel component which is Tooltip. Tooltip is set to interactive={true} as I pass TextField to the title property. So when I hoover over the knob I want to have editable Tooltip.

The issue is that when I dragging by Tooltip, the slider also is dragging.

See video:

https://user-images.githubusercontent.com/45672257/176929951-47fda612-796e-4a87-b294-969e7f83d39f.mov

CodeSandBox - https://codesandbox.io/s/rangeslider-demo-material-ui-forked-fuif4l?file=/demo.tsx

Expected behavior 🤔

To no allow drag slider by dragging Tooltip.

Steps to reproduce 🕹

Steps:

1. Create Slider component
2. Pass ValueLabelComponent to ValueLabel which is Tooltip see an example in CodeSandBox - https://codesandbox.io/s/rangeslider-demo-material-ui-forked-fuif4l?file=/demo.tsx
3. Set Tooltip interactive property to true
4. Hover over the slider knob and drag by the Tooltip

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[michaldudak]

Add onMouseDown={(e) => e.stopPropagation()} to the TextField inside the Tooltip to prevent users from dragging it. Would it resolve your issue?

[nikkizol]

@michaldudak Yes, thanks!