Skip to content

[Slider] Remove deprecated CSS classes #48074

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 6 commits into from
Mar 24, 2026
Merged

[Slider] Remove deprecated CSS classes #48074

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0f27ac7
[Slider] Remove deprecated CSS classes
siriwatknp Mar 24, 2026
d6f997e
fix ci
siriwatknp Mar 24, 2026
77f0c3d
Address review comments: simplify overridesResolver, fix CSS selector…
siriwatknp Mar 24, 2026
0f38c1f
Address review comments: remove overridesResolver from SliderThumb, r…
siriwatknp Mar 24, 2026
1114669
Apply suggestion from @ZeeshanTamboli
siriwatknp Mar 24, 2026
96c5273
Apply suggestion from @ZeeshanTamboli
siriwatknp Mar 24, 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
29 changes: 29 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 @@ -1311,6 +1311,35 @@ The following deprecated props have been removed from the `Slider` component:
/>
```

#### Slider deprecated classes removed

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

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

The following deprecated classes have been removed:

- `thumbColorPrimary` — use `.MuiSlider-colorPrimary > .MuiSlider-thumb` instead
- `thumbColorSecondary` — use `.MuiSlider-colorSecondary > .MuiSlider-thumb` instead
- `thumbColorError` — use `.MuiSlider-colorError > .MuiSlider-thumb` instead
- `thumbColorInfo` — use `.MuiSlider-colorInfo > .MuiSlider-thumb` instead
- `thumbColorSuccess` — use `.MuiSlider-colorSuccess > .MuiSlider-thumb` instead
- `thumbColorWarning` — use `.MuiSlider-colorWarning > .MuiSlider-thumb` instead
- `thumbSizeSmall` — use `.MuiSlider-sizeSmall > .MuiSlider-thumb` instead

```diff
-.MuiSlider-thumbColorPrimary
+.MuiSlider-colorPrimary > .MuiSlider-thumb

-.MuiSlider-thumbColorSecondary
+.MuiSlider-colorSecondary > .MuiSlider-thumb

-.MuiSlider-thumbSizeSmall
+.MuiSlider-sizeSmall > .MuiSlider-thumb
```

#### 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
49 changes: 0 additions & 49 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 @@ -250,55 +250,6 @@
"description": "Styles applied to the root element if `size=\"small\"`.",
"isGlobal": false
},
{
"key": "thumbColorError",
"className": "MuiSlider-thumbColorError",
"description": "Styles applied to the thumb element if `color=\"error\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorInfo",
"className": "MuiSlider-thumbColorInfo",
"description": "Styles applied to the thumb element if `color=\"info\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorPrimary",
"className": "MuiSlider-thumbColorPrimary",
"description": "Styles applied to the thumb element if `color=\"primary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorSecondary",
"className": "MuiSlider-thumbColorSecondary",
"description": "Styles applied to the thumb element if `color=\"secondary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorSuccess",
"className": "MuiSlider-thumbColorSuccess",
"description": "Styles applied to the thumb element if `color=\"success\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbColorWarning",
"className": "MuiSlider-thumbColorWarning",
"description": "Styles applied to the thumb element if `color=\"warning\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "thumbSizeSmall",
"className": "MuiSlider-thumbSizeSmall",
"description": "Styles applied to the thumb element if `size=\"small\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "trackFalse",
"className": "MuiSlider-trackFalse",
Expand Down
42 changes: 0 additions & 42 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 @@ -165,48 +165,6 @@
"nodeName": "the root element",
"conditions": "<code>size=\"small\"</code>"
},
"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-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-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-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-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-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-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-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."
},
"trackFalse": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
Expand Down
5 changes: 0 additions & 5 deletions packages/mui-material/src/Slider/Slider.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,6 @@ export type SliderSlotsAndSlotProps = CreateSlotsAndSlotProps<
}
>;

/**
* @deprecated Use `SliderRootSlotPropsOverrides` instead.
*/
export interface SliderComponentsPropsOverrides {}

export interface SliderOwnerState extends SliderProps {
dragging: boolean;
marked: boolean;
Expand Down
16 changes: 2 additions & 14 deletions packages/mui-material/src/Slider/Slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,14 +232,7 @@ export const SliderTrack = styled('span', {
export const SliderThumb = styled('span', {
name: 'MuiSlider',
slot: 'Thumb',
overridesResolver: (props, styles) => {
const { ownerState } = props;
return [
styles.thumb,
styles[`thumbColor${capitalize(ownerState.color)}`],
ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`],
];
},
overridesResolver: (props, styles) => styles.thumb,
Comment thread
siriwatknp marked this conversation as resolved.
Outdated
})(
memoTheme(({ theme }) => ({
position: 'absolute',
Expand Down Expand Up @@ -535,12 +528,7 @@ const useUtilityClasses = (ownerState) => {
markLabel: ['markLabel'],
markLabelActive: ['markLabelActive'],
valueLabel: ['valueLabel'],
thumb: [
'thumb',
disabled && 'disabled',
size && `thumbSize${capitalize(size)}`,
color && `thumbColor${capitalize(color)}`,
],
thumb: ['thumb', disabled && 'disabled'],
active: ['active'],
disabled: ['disabled'],
focusVisible: ['focusVisible'],
Expand Down
4 changes: 0 additions & 4 deletions packages/mui-material/src/Slider/Slider.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1591,18 +1591,14 @@ describe.skipIf(!supportsTouch())('<Slider />', () => {
render(<Slider />);

const root = document.querySelector(`.${classes.root}`);
const thumb = document.querySelector(`.${classes.thumb}`);
expect(root).not.to.have.class(classes.sizeSmall);
expect(thumb).not.to.have.class(classes.thumbSizeSmall);
});

it('should render small slider', () => {
render(<Slider size="small" />);

const root = document.querySelector(`.${classes.root}`);
const thumb = document.querySelector(`.${classes.thumb}`);
Comment thread
siriwatknp marked this conversation as resolved.
expect(root).to.have.class(classes.sizeSmall);
expect(thumb).to.have.class(classes.thumbSizeSmall);
});
});

Expand Down
35 changes: 0 additions & 35 deletions packages/mui-material/src/Slider/sliderClasses.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,34 +48,6 @@ export interface SliderClasses {
markLabelActive: string;
/** Styles applied to the root element if `size="small"`. */
sizeSmall: string;
/** Styles applied to the thumb element if `color="primary"`.
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorPrimary](/material-ui/api/slider/#slider-classes-MuiSlider-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
thumbColorPrimary: string;
/** Styles applied to the thumb element if `color="secondary"`.
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorSecondary](/material-ui/api/slider/#slider-classes-MuiSlider-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
thumbColorSecondary: string;
/** Styles applied to the thumb element if `color="error"`.
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorError](/material-ui/api/slider/#slider-classes-MuiSlider-colorError) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
thumbColorError: string;
/** Styles applied to the thumb element if `color="info"`.
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorInfo](/material-ui/api/slider/#slider-classes-MuiSlider-colorInfo) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
thumbColorInfo: string;
/** Styles applied to the thumb element if `color="success"`.
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorSuccess](/material-ui/api/slider/#slider-classes-MuiSlider-colorSuccess) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
thumbColorSuccess: string;
/** Styles applied to the thumb element if `color="warning"`.
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-colorWarning](/material-ui/api/slider/#slider-classes-MuiSlider-colorWarning) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
thumbColorWarning: string;
/** Styles applied to the thumb element if `size="small"`.
* @deprecated Combine the [.MuiSlider-thumb](/material-ui/api/slider/#Slider-css-MuiSlider-thumb) and [.MuiSlider-sizeSmall](/material-ui/api/slider/#slider-classes-MuiSlider-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
thumbSizeSmall: string;
/** Styles applied to the thumb label element. */
valueLabel: string;
/** Styles applied to the thumb label element if it's open. */
Expand Down Expand Up @@ -112,16 +84,9 @@ const sliderClasses: SliderClasses = generateUtilityClasses('MuiSlider', [
'rail',
'sizeSmall',
'thumb',
'thumbColorPrimary',
'thumbColorSecondary',
'thumbColorError',
'thumbColorSuccess',
'thumbColorInfo',
'thumbColorWarning',
'track',
'trackInverted',
'trackFalse',
'thumbSizeSmall',
'valueLabel',
'valueLabelOpen',
'valueLabelCircle',
Expand Down
Loading