Skip to content

[Slider] Remove deprecated props #47996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siriwatknp merged 10 commits into from
Mar 18, 2026
Merged

[Slider] Remove deprecated props #47996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
09bb1c9
[material-ui][Slider] Remove deprecated components and componentsProp…
siriwatknp Mar 17, 2026
671e79e
[Slider] Migrate slots/slotProps types to CreateSlotsAndSlotProps, fi…
siriwatknp Mar 18, 2026
7b06ec8
Merge branch 'master' of github.com:mui/material-ui into remove-depre…
siriwatknp Mar 18, 2026
2262e08
docs:api
siriwatknp Mar 18, 2026
8f4f9aa
run script
siriwatknp Mar 18, 2026
2818d37
[Slider] Rename inputProps to inProps to fix proptypes generation for…
siriwatknp Mar 18, 2026
3c3c7af
run script
siriwatknp Mar 18, 2026
42da5db
fix broken slider API docs links for thumb class moved to slots
siriwatknp Mar 18, 2026
c53428b
merge upstream/master, resolve conflict in migration guide
siriwatknp Mar 18, 2026
bb62d64
update Slider migration guide to match other sections' format
siriwatknp Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,6 +608,28 @@ The following deprecated props have been removed from the `Badge` component:
/>
```

#### Slider deprecated props removed

Use the [slider-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-props) below to migrate the code as described in the following section:

```bash
npx @mui/codemod@latest deprecations/slider-props <path>
```

The following deprecated props have been removed from the `Slider` component:

- `components` — use `slots` instead
- `componentsProps` — use `slotProps` instead

```diff
<Slider
- components={{ Track: CustomTrack }}
- componentsProps={{ track: { testid: 'test-id' } }}
+ slots={{ track: CustomTrack }}
+ slotProps={{ track: { testid: 'test-id' } }}
/>
```

#### Snackbar deprecated props removed

Use the [snackbar-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#snackbar-props) below to migrate the code as described in the following section:
Expand Down
110 changes: 50 additions & 60 deletions docs/pages/material-ui/api/slider.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,6 @@
},
"default": "'primary'"
},
"components": {
"type": {
"name": "shape",
"description": "{ Input?: elementType, Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }"
},
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"componentsProps": {
"type": {
"name": "shape",
"description": "{ input?: func<br>&#124;&nbsp;object, mark?: func<br>&#124;&nbsp;object, markLabel?: func<br>&#124;&nbsp;object, rail?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, thumb?: func<br>&#124;&nbsp;object, track?: func<br>&#124;&nbsp;object, valueLabel?: func<br>&#124;&nbsp;{ children?: element, className?: string, open?: bool, style?: object, value?: node, valueLabelDisplay?: 'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on' } }"
},
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"defaultValue": {
"type": { "name": "union", "description": "Array&lt;number&gt;<br>&#124;&nbsp;number" }
},
Expand Down Expand Up @@ -133,6 +115,56 @@
"import Slider from '@mui/material/Slider';",
"import { Slider } from '@mui/material';"
],
"slots": [
{
"name": "root",
"description": "The component that renders the root.",
"default": "'span'",
"class": "MuiSlider-root"
},
{
"name": "track",
"description": "The component that renders the track.",
"default": "'span'",
"class": "MuiSlider-track"
},
{
"name": "rail",
"description": "The component that renders the rail.",
"default": "'span'",
"class": "MuiSlider-rail"
},
{
"name": "thumb",
"description": "The component that renders the thumb.",
"default": "'span'",
"class": "MuiSlider-thumb"
},
{
"name": "mark",
"description": "The component that renders the mark.",
"default": "'span'",
"class": "MuiSlider-mark"
},
{
"name": "markLabel",
"description": "The component that renders the mark label.",
"default": "'span'",
"class": "MuiSlider-markLabel"
},
{
"name": "valueLabel",
"description": "The component that renders the value label.",
"default": "SliderValueLabel",
"class": "MuiSlider-valueLabel"
},
{
"name": "input",
"description": "The component that renders the input.",
"default": "'input'",
"class": null
}
],
"classes": [
{
"key": "active",
Expand Down Expand Up @@ -194,12 +226,6 @@
"description": "State class applied to the thumb element if keyboard focused.",
"isGlobal": true
},
{
"key": "mark",
"className": "MuiSlider-mark",
"description": "Styles applied to the mark element.",
"isGlobal": false
},
{
"key": "markActive",
"className": "MuiSlider-markActive",
Expand All @@ -212,42 +238,18 @@
"description": "Styles applied to the root element if `marks` is provided with at least one label.",
"isGlobal": false
},
{
"key": "markLabel",
"className": "MuiSlider-markLabel",
"description": "Styles applied to the mark label element.",
"isGlobal": false
},
{
"key": "markLabelActive",
"className": "MuiSlider-markLabelActive",
"description": "Styles applied to the mark label element if active (depending on the value).",
"isGlobal": false
},
{
"key": "rail",
"className": "MuiSlider-rail",
"description": "Styles applied to the rail element.",
"isGlobal": false
},
{
"key": "root",
"className": "MuiSlider-root",
"description": "Styles applied to the root element.",
"isGlobal": false
},
{
"key": "sizeSmall",
"className": "MuiSlider-sizeSmall",
"description": "Styles applied to the root element if `size=\"small\"`.",
"isGlobal": false
},
{
"key": "thumb",
"className": "MuiSlider-thumb",
"description": "Styles applied to the thumb element.",
"isGlobal": false
},
{
"key": "thumbColorError",
"className": "MuiSlider-thumbColorError",
Expand Down Expand Up @@ -297,12 +299,6 @@
"isGlobal": false,
"isDeprecated": true
},
{
"key": "track",
"className": "MuiSlider-track",
"description": "Styles applied to the track element.",
"isGlobal": false
},
{
"key": "trackFalse",
"className": "MuiSlider-trackFalse",
Expand All @@ -315,12 +311,6 @@
"description": "Styles applied to the root element if `track=\"inverted\"`.",
"isGlobal": false
},
{
"key": "valueLabel",
"className": "MuiSlider-valueLabel",
"description": "Styles applied to the thumb label element.",
"isGlobal": false
},
{
"key": "valueLabelCircle",
"className": "MuiSlider-valueLabelCircle",
Expand Down
47 changes: 19 additions & 28 deletions docs/translations/api-docs/slider/slider.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@
"color": {
"description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
},
"components": { "description": "The components used for each slot inside." },
"componentsProps": {
"description": "The extra props for the slot components. You can override the existing props or add new ones."
},
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
},
Expand Down Expand Up @@ -76,10 +72,8 @@
"description": "The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down."
},
"size": { "description": "The size of the slider." },
"slotProps": { "description": "The props used for each slot inside the Slider." },
"slots": {
"description": "The components used for each slot inside the Slider. Either a string to use a HTML element or a component."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"step": {
"description": "The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop."
},
Expand Down Expand Up @@ -151,7 +145,6 @@
"nodeName": "the thumb element",
"conditions": "keyboard focused"
},
"mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the mark element" },
"markActive": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the mark element",
Expand All @@ -162,66 +155,58 @@
"nodeName": "the root element",
"conditions": "<code>marks</code> is provided with at least one label"
},
"markLabel": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the mark label element"
},
"markLabelActive": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the mark label element",
"conditions": "active (depending on the value)"
},
"rail": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the rail element" },
"root": { "description": "Styles applied to the root element." },
"sizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"small\"</code>"
},
"thumb": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the thumb element" },
"thumbColorError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the thumb element",
"conditions": "<code>color=\"error\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorError\">.MuiSlider-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorError\">.MuiSlider-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"thumbColorInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the thumb element",
"conditions": "<code>color=\"info\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorInfo\">.MuiSlider-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorInfo\">.MuiSlider-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"thumbColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the thumb element",
"conditions": "<code>color=\"primary\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorPrimary\">.MuiSlider-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorPrimary\">.MuiSlider-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"thumbColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the thumb element",
"conditions": "<code>color=\"secondary\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorSecondary\">.MuiSlider-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorSecondary\">.MuiSlider-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"thumbColorSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the thumb element",
"conditions": "<code>color=\"success\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorSuccess\">.MuiSlider-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorSuccess\">.MuiSlider-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"thumbColorWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the thumb element",
"conditions": "<code>color=\"warning\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorWarning\">.MuiSlider-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-colorWarning\">.MuiSlider-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"thumbSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the thumb element",
"conditions": "<code>size=\"small\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-sizeSmall\">.MuiSlider-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/slider/#Slider-css-MuiSlider-thumb\">.MuiSlider-thumb</a> and <a href=\"/material-ui/api/slider/#slider-classes-MuiSlider-sizeSmall\">.MuiSlider-sizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"track": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the track element" },
"trackFalse": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
Expand All @@ -232,10 +217,6 @@
"nodeName": "the root element",
"conditions": "<code>track=\"inverted\"</code>"
},
"valueLabel": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the thumb label element"
},
"valueLabelCircle": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the thumb label&#39;s circle element"
Expand All @@ -254,5 +235,15 @@
"nodeName": "the root element",
"conditions": "<code>orientation=\"vertical\"</code>"
}
},
"slotDescriptions": {
"input": "The component that renders the input.",
"mark": "The component that renders the mark.",
"markLabel": "The component that renders the mark label.",
"rail": "The component that renders the rail.",
"root": "The component that renders the root.",
"thumb": "The component that renders the thumb.",
"track": "The component that renders the track.",
"valueLabel": "The component that renders the value label."
}
}
Loading
Loading