[Slider][material-next] Add Slider component with Material You design (#37520)

Author: DiegoAndai

docs/data/material/components/slider/SliderMaterialYouPlayground.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import MaterialYouUsageDemo from 'docs/src/modules/components/MaterialYouUsageDemo';
+import Slider from '@mui/material-next/Slider';
+import Box from '@mui/material/Box';
+
+export default function ButtonUsage() {
+  return (
+    <MaterialYouUsageDemo
+      componentName="Slider"
+      data={[
+        {
+          propName: 'min',
+          defaultValue: 0,
+        },
+        {
+          propName: 'max',
+          defaultValue: 10,
+        },
+        {
+          propName: 'valueLabelDisplay',
+          knob: 'select',
+          options: ['auto', 'on', 'off'],
+          defaultValue: 'off',
+        },
+        {
+          propName: 'size',
+          knob: 'select',
+          options: ['small', 'medium'],
+          defaultValue: 'medium',
+        },
+        {
+          propName: 'marks',
+          knob: 'switch',
+          defaultValue: false,
+        },
+        {
+          propName: 'disabled',
+          knob: 'switch',
+          defaultValue: false,
+        },
+      ]}
+      renderDemo={(props) => (
+        <Box sx={{ width: 300 }}>
+          <Slider {...props}>Hello world</Slider>
+        </Box>
+      )}
+    />
+  );
+}

docs/data/material/components/slider/slider.md

@@ -158,3 +158,16 @@ You can solve the issue with:
   left: calc(-50% - 4px);
 }
 ```
+
+## Experimental API
+
+### Material You version
+
+The default Slider component follows the Material Design 2 specs.
+For the Material Design 3 ([Material You](https://m3.material.io/)) version, you can use the new experimental `@mui/material-next` package:
+
+```js
+import Slider from '@mui/material-next/Slider';
+```
+
+{{"demo": "SliderMaterialYouPlayground.js", "hideToolbar": true}}

docs/pages/experiments/md3/index.tsx

@@ -280,14 +280,17 @@ const customPalette = {
   neutral: {
     '0': '#000000',
     '10': '#201a1c',
+    '17': '#2e282a',
     '20': '#352f30',
+    '22': '#393335',
     '30': '#4c4546',
     '40': '#645c5e',
     '50': '#7e7577',
     '60': '#988e90',
     '70': '#b3a9aa',
     '80': '#cfc4c5',
     '90': '#ebe0e1',
+    '92': '#f1e5e6',
     '95': '#faeef0',
     '99': '#fffbff',
     '100': '#ffffff',

packages/mui-material-next/src/Slider/Slider.spec.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Slider from '@mui/material-next/Slider';
+import { SliderOwnerState } from './Slider.types';
+
+function testOnChange() {
+  function handleSliderChange(event: Event, value: unknown) {}
+  function handleSliderChangeCommitted(event: React.SyntheticEvent | Event, value: unknown) {}
+  <Slider onChange={handleSliderChange} onChangeCommitted={handleSliderChangeCommitted} />;
+
+  function handleElementChange(event: React.ChangeEvent) {}
+  <Slider onChange={handleElementChange} onChangeCommitted={handleElementChange} />;
+}
+
+<Slider track="inverted" />;
+
+// slotProps as object
+<Slider
+  slotProps={{
+    root: { onMouseDown: () => 'onMouseDown event triggered' },
+    input: { disabled: true },
+    mark: { onClick: () => 'clicked' },
+    markLabel: { className: 'markLabel' },
+    rail: { className: 'rail' },
+    thumb: { className: 'thumb' },
+    valueLabel: { valueLabelDisplay: 'auto' },
+  }}
+/>;
+
+// slotProps as function
+<Slider
+  slotProps={{
+    root: ({ color }: SliderOwnerState) => ({
+      className: color === 'primary' ? 'root_primary' : 'root_secondary',
+    }),
+    input: ({ size }: SliderOwnerState) => ({ disabled: size === 'medium' }),
+    mark: ({ marked }: SliderOwnerState) => ({
+      className: marked ? 'marked' : '',
+    }),
+    markLabel: ({ max }: SliderOwnerState) => ({
+      className: max === 99 ? 'red' : 'normal',
+    }),
+    rail: ({ dragging }: SliderOwnerState) => ({
+      className: dragging ? 'rail' : '',
+    }),
+    thumb: ({ orientation }: SliderOwnerState) => ({
+      className: orientation === 'vertical' ? 'thumb_vertical' : '',
+    }),
+  }}
+/>;