diff --git a/docs/data/material/components/slider/CustomizedSlider.js b/docs/data/material/components/slider/CustomizedSlider.js
index aeff66ba526c48..c3292d12ff1419 100644
--- a/docs/data/material/components/slider/CustomizedSlider.js
+++ b/docs/data/material/components/slider/CustomizedSlider.js
@@ -18,7 +18,7 @@ function ValueLabelComponent(props) {
ValueLabelComponent.propTypes = {
children: PropTypes.element.isRequired,
- value: PropTypes.number.isRequired,
+ value: PropTypes.node,
};
const iOSBoxShadow =
diff --git a/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json
index 8060ebacdf56f3..d6af2d7107e76d 100644
--- a/docs/pages/material-ui/api/slider.json
+++ b/docs/pages/material-ui/api/slider.json
@@ -23,7 +23,7 @@
"componentsProps": {
"type": {
"name": "shape",
- "description": "{ input?: func
| object, mark?: func
| object, markLabel?: func
| object, rail?: func
| object, root?: func
| object, thumb?: func
| object, track?: func
| object, valueLabel?: func
| { children?: element, className?: string, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }"
+ "description": "{ input?: func
| object, mark?: func
| object, markLabel?: func
| object, rail?: func
| object, root?: func
| object, thumb?: func
| object, track?: func
| object, valueLabel?: func
| { children?: element, className?: string, open?: bool, style?: object, value?: node, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }"
},
"default": "{}",
"deprecated": true,
@@ -89,7 +89,7 @@
"slotProps": {
"type": {
"name": "shape",
- "description": "{ input?: func
| object, mark?: func
| object, markLabel?: func
| object, rail?: func
| object, root?: func
| object, thumb?: func
| object, track?: func
| object, valueLabel?: func
| { children?: element, className?: string, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }"
+ "description": "{ input?: func
| object, mark?: func
| object, markLabel?: func
| object, rail?: func
| object, root?: func
| object, thumb?: func
| object, track?: func
| object, valueLabel?: func
| { children?: element, className?: string, open?: bool, style?: object, value?: node, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }"
},
"default": "{}"
},
diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts
index fe1e06a53ea74a..907d40a5e039c3 100644
--- a/packages/mui-material/src/Slider/Slider.d.ts
+++ b/packages/mui-material/src/Slider/Slider.d.ts
@@ -284,7 +284,7 @@ export interface SliderValueLabelProps extends React.HTMLAttributes;
index: number;
open: boolean;
- value: number;
+ value: React.ReactNode;
}
type SliderRootProps = NonNullable['root'];
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 34435c00504f52..44ca12235bb555 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -442,7 +442,7 @@ SliderValueLabel.propTypes /* remove-proptypes */ = {
/**
* @ignore
*/
- value: PropTypes.number.isRequired,
+ value: PropTypes.node,
};
export { SliderValueLabel };
@@ -966,7 +966,7 @@ Slider.propTypes /* remove-proptypes */ = {
className: PropTypes.string,
open: PropTypes.bool,
style: PropTypes.object,
- value: PropTypes.number,
+ value: PropTypes.node,
valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
}),
]),
@@ -1094,7 +1094,7 @@ Slider.propTypes /* remove-proptypes */ = {
className: PropTypes.string,
open: PropTypes.bool,
style: PropTypes.object,
- value: PropTypes.number,
+ value: PropTypes.node,
valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
}),
]),
diff --git a/packages/mui-material/src/Slider/SliderValueLabel.types.ts b/packages/mui-material/src/Slider/SliderValueLabel.types.ts
index 251c91edc65617..8fac93f872dcb8 100644
--- a/packages/mui-material/src/Slider/SliderValueLabel.types.ts
+++ b/packages/mui-material/src/Slider/SliderValueLabel.types.ts
@@ -8,9 +8,8 @@ export interface SliderValueLabelProps {
open: boolean;
/**
* The value of the slider.
- * For ranged sliders, provide an array with two values.
*/
- value: number;
+ value: React.ReactNode;
/**
* Controls when the value label is displayed:
*