From 0f27ac79433b4647e42fd05a016c45620e47eabd Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 24 Mar 2026 09:56:17 +0700 Subject: [PATCH 1/6] [Slider] Remove deprecated CSS classes --- .../migration/upgrade-to-v9/upgrade-to-v9.md | 29 +++++++++++ docs/pages/material-ui/api/slider.json | 49 ------------------- docs/translations/api-docs/slider/slider.json | 42 ---------------- packages/mui-material/src/Slider/Slider.d.ts | 5 -- packages/mui-material/src/Slider/Slider.js | 14 +----- .../mui-material/src/Slider/Slider.test.js | 3 -- .../mui-material/src/Slider/sliderClasses.ts | 35 ------------- 7 files changed, 31 insertions(+), 146 deletions(-) diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index 0b279e951266a0..801b32aba8a79b 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -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 +``` + +The following deprecated classes have been removed: + +- `thumbColorPrimary` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorPrimary` classes instead +- `thumbColorSecondary` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorSecondary` classes instead +- `thumbColorError` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorError` classes instead +- `thumbColorInfo` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorInfo` classes instead +- `thumbColorSuccess` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorSuccess` classes instead +- `thumbColorWarning` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorWarning` classes instead +- `thumbSizeSmall` — combine the `.MuiSlider-thumb` and `.MuiSlider-sizeSmall` classes instead + +```diff +-.MuiSlider-thumbColorPrimary ++.MuiSlider-thumb.MuiSlider-colorPrimary + +-.MuiSlider-thumbColorSecondary ++.MuiSlider-thumb.MuiSlider-colorSecondary + +-.MuiSlider-thumbSizeSmall ++.MuiSlider-thumb.MuiSlider-sizeSmall +``` + #### 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: diff --git a/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json index 9e4bd0c5053553..21be9a7d888cd4 100644 --- a/docs/pages/material-ui/api/slider.json +++ b/docs/pages/material-ui/api/slider.json @@ -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", diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json index ea030711cb3bad..ea790883ef4efa 100644 --- a/docs/translations/api-docs/slider/slider.json +++ b/docs/translations/api-docs/slider/slider.json @@ -165,48 +165,6 @@ "nodeName": "the root element", "conditions": "size=\"small\"" }, - "thumbColorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the thumb element", - "conditions": "color=\"error\"", - "deprecationInfo": "Combine the .MuiSlider-thumb and .MuiSlider-colorError classes instead. See Migrating from deprecated APIs for more details." - }, - "thumbColorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the thumb element", - "conditions": "color=\"info\"", - "deprecationInfo": "Combine the .MuiSlider-thumb and .MuiSlider-colorInfo classes instead. See Migrating from deprecated APIs for more details." - }, - "thumbColorPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the thumb element", - "conditions": "color=\"primary\"", - "deprecationInfo": "Combine the .MuiSlider-thumb and .MuiSlider-colorPrimary classes instead. See Migrating from deprecated APIs for more details." - }, - "thumbColorSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the thumb element", - "conditions": "color=\"secondary\"", - "deprecationInfo": "Combine the .MuiSlider-thumb and .MuiSlider-colorSecondary classes instead. See Migrating from deprecated APIs for more details." - }, - "thumbColorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the thumb element", - "conditions": "color=\"success\"", - "deprecationInfo": "Combine the .MuiSlider-thumb and .MuiSlider-colorSuccess classes instead. See Migrating from deprecated APIs for more details." - }, - "thumbColorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the thumb element", - "conditions": "color=\"warning\"", - "deprecationInfo": "Combine the .MuiSlider-thumb and .MuiSlider-colorWarning classes instead. See Migrating from deprecated APIs for more details." - }, - "thumbSizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the thumb element", - "conditions": "size=\"small\"", - "deprecationInfo": "Combine the .MuiSlider-thumb and .MuiSlider-sizeSmall classes instead. See Migrating from deprecated APIs for more details." - }, "trackFalse": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index a76c0e9e04f276..74d23187c185ce 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -114,11 +114,6 @@ export type SliderSlotsAndSlotProps = CreateSlotsAndSlotProps< } >; -/** - * @deprecated Use `SliderRootSlotPropsOverrides` instead. - */ -export interface SliderComponentsPropsOverrides {} - export interface SliderOwnerState extends SliderProps { dragging: boolean; marked: boolean; diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 75137bf89e43bd..b8aaf254c47b5b 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -233,12 +233,7 @@ 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)}`], - ]; + return [styles.thumb]; }, })( memoTheme(({ theme }) => ({ @@ -535,12 +530,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'], diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js index 42663b3469727c..9d67a9a974f1ba 100644 --- a/packages/mui-material/src/Slider/Slider.test.js +++ b/packages/mui-material/src/Slider/Slider.test.js @@ -1593,16 +1593,13 @@ describe.skipIf(!supportsTouch())('', () => { 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(); const root = document.querySelector(`.${classes.root}`); - const thumb = document.querySelector(`.${classes.thumb}`); expect(root).to.have.class(classes.sizeSmall); - expect(thumb).to.have.class(classes.thumbSizeSmall); }); }); diff --git a/packages/mui-material/src/Slider/sliderClasses.ts b/packages/mui-material/src/Slider/sliderClasses.ts index f62d19e9914bf4..233538e584af05 100644 --- a/packages/mui-material/src/Slider/sliderClasses.ts +++ b/packages/mui-material/src/Slider/sliderClasses.ts @@ -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. */ @@ -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', From d6f997e8ff2e1b49c13ce250bafba2158a31091e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 24 Mar 2026 10:08:10 +0700 Subject: [PATCH 2/6] fix ci Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/mui-material/src/Slider/Slider.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js index 9d67a9a974f1ba..020f5b85dbdca3 100644 --- a/packages/mui-material/src/Slider/Slider.test.js +++ b/packages/mui-material/src/Slider/Slider.test.js @@ -1591,7 +1591,6 @@ describe.skipIf(!supportsTouch())('', () => { render(); const root = document.querySelector(`.${classes.root}`); - const thumb = document.querySelector(`.${classes.thumb}`); expect(root).not.to.have.class(classes.sizeSmall); }); From 77f0c3d0240f4634e4c97958566faa795a81d34b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 24 Mar 2026 15:16:49 +0700 Subject: [PATCH 3/6] Address review comments: simplify overridesResolver, fix CSS selectors in migration doc Co-Authored-By: Claude Opus 4.6 (1M context) --- .../migration/upgrade-to-v9/upgrade-to-v9.md | 20 +++++++++---------- packages/mui-material/src/Slider/Slider.js | 4 +--- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index 801b32aba8a79b..30b9f6f2d893ec 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -1321,23 +1321,23 @@ npx @mui/codemod@latest deprecations/slider-classes The following deprecated classes have been removed: -- `thumbColorPrimary` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorPrimary` classes instead -- `thumbColorSecondary` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorSecondary` classes instead -- `thumbColorError` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorError` classes instead -- `thumbColorInfo` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorInfo` classes instead -- `thumbColorSuccess` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorSuccess` classes instead -- `thumbColorWarning` — combine the `.MuiSlider-thumb` and `.MuiSlider-colorWarning` classes instead -- `thumbSizeSmall` — combine the `.MuiSlider-thumb` and `.MuiSlider-sizeSmall` classes instead +- `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-thumb.MuiSlider-colorPrimary ++.MuiSlider-colorPrimary > .MuiSlider-thumb -.MuiSlider-thumbColorSecondary -+.MuiSlider-thumb.MuiSlider-colorSecondary ++.MuiSlider-colorSecondary > .MuiSlider-thumb -.MuiSlider-thumbSizeSmall -+.MuiSlider-thumb.MuiSlider-sizeSmall ++.MuiSlider-sizeSmall > .MuiSlider-thumb ``` #### Snackbar deprecated props removed diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index b8aaf254c47b5b..2bd5ceaa8f69a2 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -232,9 +232,7 @@ export const SliderTrack = styled('span', { export const SliderThumb = styled('span', { name: 'MuiSlider', slot: 'Thumb', - overridesResolver: (props, styles) => { - return [styles.thumb]; - }, + overridesResolver: (props, styles) => styles.thumb, })( memoTheme(({ theme }) => ({ position: 'absolute', From 0f38c1f8151c5a53e6c12ba67459227614346499 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 24 Mar 2026 15:33:09 +0700 Subject: [PATCH 4/6] Address review comments: remove overridesResolver from SliderThumb, restore thumb class assertions Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/mui-material/src/Slider/Slider.js | 1 - packages/mui-material/src/Slider/Slider.test.js | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 2bd5ceaa8f69a2..3e836ec1971934 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -232,7 +232,6 @@ export const SliderTrack = styled('span', { export const SliderThumb = styled('span', { name: 'MuiSlider', slot: 'Thumb', - overridesResolver: (props, styles) => styles.thumb, })( memoTheme(({ theme }) => ({ position: 'absolute', diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js index 020f5b85dbdca3..690ea9725c13b9 100644 --- a/packages/mui-material/src/Slider/Slider.test.js +++ b/packages/mui-material/src/Slider/Slider.test.js @@ -1591,14 +1591,18 @@ describe.skipIf(!supportsTouch())('', () => { render(); const root = document.querySelector(`.${classes.root}`); + const thumb = document.querySelector(`.${classes.thumb}`); expect(root).not.to.have.class(classes.sizeSmall); + expect(thumb).to.have.class(classes.thumb); }); it('should render small slider', () => { render(); const root = document.querySelector(`.${classes.root}`); + const thumb = document.querySelector(`.${classes.thumb}`); expect(root).to.have.class(classes.sizeSmall); + expect(thumb).to.have.class(classes.thumb); }); }); From 11146694be3e6e98e2db8791baf241b8ee10ef8c Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Tue, 24 Mar 2026 15:53:10 +0700 Subject: [PATCH 5/6] Apply suggestion from @ZeeshanTamboli Co-authored-by: Zeeshan Tamboli Signed-off-by: Siriwat K --- packages/mui-material/src/Slider/Slider.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js index 690ea9725c13b9..d6da3fcd4eef12 100644 --- a/packages/mui-material/src/Slider/Slider.test.js +++ b/packages/mui-material/src/Slider/Slider.test.js @@ -1593,7 +1593,7 @@ describe.skipIf(!supportsTouch())('', () => { const root = document.querySelector(`.${classes.root}`); const thumb = document.querySelector(`.${classes.thumb}`); expect(root).not.to.have.class(classes.sizeSmall); - expect(thumb).to.have.class(classes.thumb); + expect(thumb).not.to.equal(null); }); it('should render small slider', () => { From 96c5273b1e3d6c50047d8bcf607f13d1bd4650ce Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Tue, 24 Mar 2026 15:55:34 +0700 Subject: [PATCH 6/6] Apply suggestion from @ZeeshanTamboli Co-authored-by: Zeeshan Tamboli Signed-off-by: Siriwat K --- packages/mui-material/src/Slider/Slider.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js index d6da3fcd4eef12..7aaee6e1a121da 100644 --- a/packages/mui-material/src/Slider/Slider.test.js +++ b/packages/mui-material/src/Slider/Slider.test.js @@ -1602,7 +1602,7 @@ describe.skipIf(!supportsTouch())('', () => { const root = document.querySelector(`.${classes.root}`); const thumb = document.querySelector(`.${classes.thumb}`); expect(root).to.have.class(classes.sizeSmall); - expect(thumb).to.have.class(classes.thumb); + expect(thumb).not.to.equal(null); }); });