diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js
index 6bcc33c87e59c3..eeb6682d996ed2 100644
--- a/docs/data/base/components/slider/DiscreteSlider.js
+++ b/docs/data/base/components/slider/DiscreteSlider.js
@@ -3,6 +3,35 @@ import PropTypes from 'prop-types';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={30}
+        getAriaValueText={valuetext}
+        step={10}
+        marks
+        min={10}
+        max={110}
+        slots={{ valueLabel: SliderValueLabel }}
+      />
+    </Box>
+  );
+}
+
+function SliderValueLabel({ children }) {
+  return <span className="valueLabel">{children}</span>;
+}
+
+SliderValueLabel.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -122,32 +151,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-function SliderValueLabel({ children }) {
-  return <span className="valueLabel">{children}</span>;
-}
-
-SliderValueLabel.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={30}
-        getAriaValueText={valuetext}
-        step={10}
-        marks
-        min={10}
-        max={110}
-        slots={{ valueLabel: SliderValueLabel }}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx
index 9781af1cf199e4..a87ecad83cdcbb 100644
--- a/docs/data/base/components/slider/DiscreteSlider.tsx
+++ b/docs/data/base/components/slider/DiscreteSlider.tsx
@@ -2,6 +2,35 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={30}
+        getAriaValueText={valuetext}
+        step={10}
+        marks
+        min={10}
+        max={110}
+        slots={{ valueLabel: SliderValueLabel }}
+      />
+    </Box>
+  );
+}
+
+interface SliderValueLabelProps {
+  children: React.ReactElement;
+}
+
+function SliderValueLabel({ children }: SliderValueLabelProps) {
+  return <span className="valueLabel">{children}</span>;
+}
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -121,32 +150,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-interface SliderValueLabelProps {
-  children: React.ReactElement;
-}
-
-function SliderValueLabel({ children }: SliderValueLabelProps) {
-  return <span className="valueLabel">{children}</span>;
-}
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={30}
-        getAriaValueText={valuetext}
-        step={10}
-        marks
-        min={10}
-        max={110}
-        slots={{ valueLabel: SliderValueLabel }}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js
index 3bffe39dda3b92..f6269edc1f29b6 100644
--- a/docs/data/base/components/slider/DiscreteSliderMarks.js
+++ b/docs/data/base/components/slider/DiscreteSliderMarks.js
@@ -2,6 +2,42 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSliderMarks() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={37}
+        getAriaValueText={valuetext}
+        marks={marks}
+      />
+    </Box>
+  );
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -119,39 +155,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderMarks() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        marks={marks}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
index b796801ab68495..9894b01c8a6b5e 100644
--- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx
+++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
@@ -2,6 +2,42 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSliderMarks() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={37}
+        getAriaValueText={valuetext}
+        marks={marks}
+      />
+    </Box>
+  );
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -119,39 +155,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderMarks() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        marks={marks}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js
index b3cf090d1988a3..6a50b81e293358 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.js
+++ b/docs/data/base/components/slider/DiscreteSliderValues.js
@@ -2,6 +2,43 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSliderValues() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={37}
+        getAriaValueText={valuetext}
+        step={null}
+        marks={marks}
+      />
+    </Box>
+  );
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -119,40 +156,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderValues() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        step={null}
-        marks={marks}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx
index 3caefc5e6ec6ab..ce42cce62df3b6 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.tsx
+++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx
@@ -2,6 +2,43 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function DiscreteSliderValues() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider
+        aria-label="Temperature"
+        defaultValue={37}
+        getAriaValueText={valuetext}
+        step={null}
+        marks={marks}
+      />
+    </Box>
+  );
+}
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 20,
+    label: '20°C',
+  },
+  {
+    value: 37,
+    label: '37°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -119,40 +156,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-export default function DiscreteSliderValues() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider
-        aria-label="Temperature"
-        defaultValue={37}
-        getAriaValueText={valuetext}
-        step={null}
-        marks={marks}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js
index d4d73e1f1fe6f0..af7613c47e6851 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.js
+++ b/docs/data/base/components/slider/LabeledValuesSlider.js
@@ -3,6 +3,26 @@ import PropTypes from 'prop-types';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function LabeledValuesSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
+    </Box>
+  );
+}
+
+function SliderValueLabel({ children }) {
+  return (
+    <span className="label">
+      <div className="value">{children}</div>
+    </span>
+  );
+}
+
+SliderValueLabel.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -113,23 +133,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-function SliderValueLabel({ children }) {
-  return (
-    <span className="label">
-      <div className="value">{children}</div>
-    </span>
-  );
-}
-
-SliderValueLabel.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-export default function LabeledValuesSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx
index f34b5261304754..b86cc2e2769b45 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.tsx
+++ b/docs/data/base/components/slider/LabeledValuesSlider.tsx
@@ -2,6 +2,26 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function LabeledValuesSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
+    </Box>
+  );
+}
+
+interface SliderValueLabelProps {
+  children: React.ReactElement;
+}
+
+function SliderValueLabel({ children }: SliderValueLabelProps) {
+  return (
+    <span className="label">
+      <div className="value">{children}</div>
+    </span>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -112,23 +132,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-interface SliderValueLabelProps {
-  children: React.ReactElement;
-}
-
-function SliderValueLabel({ children }: SliderValueLabelProps) {
-  return (
-    <span className="label">
-      <div className="value">{children}</div>
-    </span>
-  );
-}
-
-export default function LabeledValuesSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js
index 8efb55e311ee4e..9210500dd2910f 100644
--- a/docs/data/base/components/slider/RangeSlider.js
+++ b/docs/data/base/components/slider/RangeSlider.js
@@ -2,6 +2,40 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function RangeSlider() {
+  const [value, setValue] = React.useState([20, 37]);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: 300 }}>
+      {/* controlled: */}
+      <StyledSlider
+        value={value}
+        onChange={handleChange}
+        getAriaLabel={() => 'Temperature range'}
+        getAriaValueText={valuetext}
+        min={0}
+        max={100}
+      />
+      {/* uncontrolled: */}
+      <StyledSlider
+        defaultValue={[20, 37]}
+        getAriaLabel={() => 'Temperature range'}
+        getAriaValueText={valuetext}
+        min={0}
+        max={100}
+      />
+    </Box>
+  );
+}
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -110,37 +144,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-function valuetext(value) {
-  return `${value}°C`;
-}
-
-export default function RangeSlider() {
-  const [value, setValue] = React.useState([20, 37]);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    <Box sx={{ width: 300 }}>
-      {/* controlled: */}
-      <StyledSlider
-        value={value}
-        onChange={handleChange}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
-      {/* uncontrolled: */}
-      <StyledSlider
-        defaultValue={[20, 37]}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx
index 95f422643a972c..d93d67ca7f3b76 100644
--- a/docs/data/base/components/slider/RangeSlider.tsx
+++ b/docs/data/base/components/slider/RangeSlider.tsx
@@ -2,6 +2,40 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function RangeSlider() {
+  const [value, setValue] = React.useState<number[]>([20, 37]);
+
+  const handleChange = (event: Event, newValue: number | number[]) => {
+    setValue(newValue as number[]);
+  };
+
+  return (
+    <Box sx={{ width: 300 }}>
+      {/* controlled: */}
+      <StyledSlider
+        value={value}
+        onChange={handleChange}
+        getAriaLabel={() => 'Temperature range'}
+        getAriaValueText={valuetext}
+        min={0}
+        max={100}
+      />
+      {/* uncontrolled: */}
+      <StyledSlider
+        defaultValue={[20, 37]}
+        getAriaLabel={() => 'Temperature range'}
+        getAriaValueText={valuetext}
+        min={0}
+        max={100}
+      />
+    </Box>
+  );
+}
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -110,37 +144,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-export default function RangeSlider() {
-  const [value, setValue] = React.useState<number[]>([20, 37]);
-
-  const handleChange = (event: Event, newValue: number | number[]) => {
-    setValue(newValue as number[]);
-  };
-
-  return (
-    <Box sx={{ width: 300 }}>
-      {/* controlled: */}
-      <StyledSlider
-        value={value}
-        onChange={handleChange}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
-      {/* uncontrolled: */}
-      <StyledSlider
-        defaultValue={[20, 37]}
-        getAriaLabel={() => 'Temperature range'}
-        getAriaValueText={valuetext}
-        min={0}
-        max={100}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/UnstyledSlider.js b/docs/data/base/components/slider/UnstyledSlider.js
index 6176202c89455a..55b5eea3ed73c7 100644
--- a/docs/data/base/components/slider/UnstyledSlider.js
+++ b/docs/data/base/components/slider/UnstyledSlider.js
@@ -2,6 +2,15 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function UnstyledSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider defaultValue={10} />
+      <StyledSlider defaultValue={10} disabled />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-export default function UnstyledSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider defaultValue={10} />
-      <StyledSlider defaultValue={10} disabled />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/UnstyledSlider.tsx b/docs/data/base/components/slider/UnstyledSlider.tsx
index 6176202c89455a..55b5eea3ed73c7 100644
--- a/docs/data/base/components/slider/UnstyledSlider.tsx
+++ b/docs/data/base/components/slider/UnstyledSlider.tsx
@@ -2,6 +2,15 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function UnstyledSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider defaultValue={10} />
+      <StyledSlider defaultValue={10} disabled />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-export default function UnstyledSlider() {
-  return (
-    <Box sx={{ width: 300 }}>
-      <StyledSlider defaultValue={10} />
-      <StyledSlider defaultValue={10} disabled />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction.js b/docs/data/base/components/slider/UnstyledSliderIntroduction.js
index 2b502de28bd01a..b415218cb94e0f 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction.js
@@ -2,6 +2,15 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function UnstyledSlider() {
+  return (
+    <Box sx={{ width: 320 }}>
+      <StyledSlider defaultValue={50} />
+      <StyledSlider defaultValue={10} disabled />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-export default function UnstyledSlider() {
-  return (
-    <Box sx={{ width: 320 }}>
-      <StyledSlider defaultValue={50} />
-      <StyledSlider defaultValue={10} disabled />
-    </Box>
-  );
-}
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx
index 2b502de28bd01a..b415218cb94e0f 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx
@@ -2,6 +2,15 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
+export default function UnstyledSlider() {
+  return (
+    <Box sx={{ width: 320 }}>
+      <StyledSlider defaultValue={50} />
+      <StyledSlider defaultValue={10} disabled />
+    </Box>
+  );
+}
+
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
@@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)(
   }
 `,
 );
-
-export default function UnstyledSlider() {
-  return (
-    <Box sx={{ width: 320 }}>
-      <StyledSlider defaultValue={50} />
-      <StyledSlider defaultValue={10} disabled />
-    </Box>
-  );
-}