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

[Nashyn]

Fixes https://github.com/mui/material-ui/issues/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:

https://github.com/mui/material-ui/assets/137361980/66293d66-6a72-496f-a255-77f15a8702f8

[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 :no_entry_sign: dangerJS against b5ce5b01c7d12af55451a5004e57314633cab59d

[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]

Since this PR is inactive, I am closing it.