[Joy] Add Slider component and demos

[hbjORbj]

• I have followed (at least) the PR section of the contributing guide.

Done:

• Initial implementation
• Apply Joy theme (color, variant, size)
• Examples with some varying prop values
• tests (need more)
• examples
• demos

Docs: https://deploy-preview-32694--material-ui.netlify.app/joy-ui/react-slider/

[mui-bot]

Details of bundle changes

@mui/joy: parsed: +12.85% , gzip: +13.55%

Generated by 🚫 dangerJS against 37bded4

[siriwatknp]

About the global variants, let's follow the Switch component. However, the Slider is a bit more complex because it has rail element.

For the component variables, here is what I think (quite similar to Switch):

--Slider-track-height
--Slider-track-radius
--Slider-rail-height
--Slider-thumb-size
--Slider-thumb-shadow

It's better to do the customization with different design eg. https://mui.com/material-ui/react-slider/#customization to see if the variables make sense, what are missing or too complicated.

[siriwatknp]

Props

variant

Sorry about this Benny, I think let's remove the variant prop and go with one default design for the Slider. I feel that the slider is an exception for the global variants. Let's use this one as a default design:

The color prop still exists. You can use this token for the default design:

'--Slider-track-background': theme.vars.palette[color!]?.solidBg

Demos

Can you add the functionality demos similar to Material UI?

• steps
• marks
• label
• range
• removed track, inverted track

[siriwatknp]

👍 I pushed some improvements about the variables to make it works with vertical slider and combine the colors & sizes into one demo