[docs][material-ui] Fix slider in color customization playground twitches when sliding

[Nashyn]

Fixes #42019

There were conflicting css issues that was preventing the slider from working smoothly when going from left to right or right to left and causing twitch after 100 and 50.

The issue is now solved as shown in the video below:

Twitch_issue_fixed.mp4

[mui-bot]

Netlify deploy preview

https://deploy-preview-42119--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against b5ce5b0

[Nashyn]

@mj12albert can you please look at the changes whenever you get a chance.

[mj12albert]

@mj12albert can you please look at the changes whenever you get a chance.

@Nashyn Thanks for working on this! I will review this today

[mj12albert]

@Nashyn Your changes does indeed fix the issue 👍

Just wondering how you found the fix and if you have tried other alternatives - it would be preferable if this could be fixed without using magic numbers ~

[Nashyn]

@mj12albert I found the fix while inspecting and trying roundabouts with slider css and saw a twitch was occuring due to conflicting styles. I have committed the changes you asked for if the solution works without magic number. Can you please review it. Thank you.

[ZeeshanTamboli]

@Nashyn Thanks for the pull request.

There were conflicting css issues that was preventing the slider from working smooth

Could you explain what were the conflicting CSS styles, and how does wrapping Typography in a div resolve the issue?

[ZeeshanTamboli]

Since this PR is inactive, I am closing it.