[SliderUnstyled] Fix dragging on disabled sliders

[mnajdova]

Fixes #31851

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against e97f8f7

[siriwatknp]

👍 LGTM

[oliviertassinari]

From my perspective, this is the whole fix:

material-ui/packages/mui-material/src/Slider/Slider.js

Lines 101 to 105 in bbdf508

	[`&.${sliderClasses.disabled}`]: {
	pointerEvents: 'none',
	cursor: 'default',
	color: theme.palette.grey[400],
	},

updating the demo. The cursor/color is still wrong on this PR, proof: https://codesandbox.io/s/unstyledslider-material-demo-forked-sq5hq6

[mnajdova]

From my perspective, this is the whole fix:

 [`&.${sliderClasses.disabled}`]: { 
   pointerEvents: 'none', 
   cursor: 'default', 
   color: theme.palette.grey[400], 
 }, 

updating the demo.

I will add this in addition, but I still think we need to disable the interaction on the component itself. We already support the prop, so why not handle it in the unstyled component? We partially handle some of the interaction based on the disabled prop, but not all, which can be confusing.

---

Edited: @michaldudak could you update the unstyled demos with the codesnippet above in #31850 to avoid conflicts?

[michaldudak]

could you update the unstyled demos with the codesnippet above in #31850 to avoid conflicts?

Sure! As the interaction is blocked in the event handlers, we don't need pointer-events: none, do we?

[mnajdova]

Sure! As the interaction is blocked in the event handlers, we don't need pointer-events: none, do we?

Good point, yes, we shouldn't need it.

[michaldudak]

Actually, it prevents the hover styles from kicking in, so I decided to leave it after all.

[michaldudak]

One of these cases where tests take 5x more effort than the implementation :)
Good job!