Summary
Add a codemod that migrates MUI Slider to the BUI Slider API, including the min/max prop renames and the direct-value change handler model.
This issue is intentionally separate from the other choice controls because the slider value API and range behavior are distinct enough to warrant their own codemod boundary.
Detection Criteria
Slider imports from @material-ui/core/Slider
- props such as
min, max, step, value, defaultValue, and onChange
- handler shapes that receive
(_event, value) or similar MUI slider callbacks
Transformation Logic
- Replace the MUI import with
Slider from @backstage/ui.
- Map
min to minValue and max to maxValue.
- Preserve
step, value, and defaultValue when the destination API supports them directly.
- Rewrite the common MUI callback shape from
(_event, value) to the BUI direct-value callback when the local handler is trivial.
- Insert
TODO(backstage-codemod): finish slider migration manually for range sliders, marks, value-label formatting, or custom event/value handling that is not obviously mechanical.
Before / After Example
Basic slider:
// Before
import Slider from '@material-ui/core/Slider';
<Slider min={0} max={100} value={value} onChange={(_e, next) => setValue(next as number)} />
// After
import { Slider } from '@backstage/ui';
<Slider minValue={0} maxValue={100} value={value} onChange={next => setValue(next as number)} />
Notes / Edge Cases
- Do not guess how to migrate array/range slider values in the deterministic pass unless the destination API contract is explicit and tested.
- Marks, labels, and custom formatting often carry UX intent; preserve or TODO them rather than dropping behavior silently.
- This issue closes a remaining form-control gap in the migration skill inventory.
Changeset (when implementing)
- Package:
@backstage/migrate-mui-slider-to-bui-slider
- Bump: minor (initial release)
- Summary example:
Add codemod to migrate mui slider to bui slider for the Backstage MUI 4 to BUI migration
Implementation notes
- Target directory:
codemods/misc/migrate-mui-slider-to-bui-slider/
- Branch/worktree:
.worktrees/feat/mui4-to-bui/migrate-mui-slider-to-bui-slider
- Open PR when ready; one PR per codemod
Summary
Add a codemod that migrates MUI
Sliderto the BUISliderAPI, including themin/maxprop renames and the direct-value change handler model.This issue is intentionally separate from the other choice controls because the slider value API and range behavior are distinct enough to warrant their own codemod boundary.
Detection Criteria
Sliderimports from@material-ui/core/Slidermin,max,step,value,defaultValue, andonChange(_event, value)or similar MUI slider callbacksTransformation Logic
Sliderfrom@backstage/ui.mintominValueandmaxtomaxValue.step,value, anddefaultValuewhen the destination API supports them directly.(_event, value)to the BUI direct-value callback when the local handler is trivial.TODO(backstage-codemod): finish slider migration manuallyfor range sliders, marks, value-label formatting, or custom event/value handling that is not obviously mechanical.Before / After Example
Basic slider:
Notes / Edge Cases
Changeset (when implementing)
@backstage/migrate-mui-slider-to-bui-sliderAdd codemod to migrate mui slider to bui slider for the Backstage MUI 4 to BUI migrationImplementation notes
codemods/misc/migrate-mui-slider-to-bui-slider/.worktrees/feat/mui4-to-bui/migrate-mui-slider-to-bui-slider