Slider
Continuous or stepped value control with optional ± buttons, display value, and stepper ticks. Track fill uses selected tokens.
Appearance
Content
Value
State
Layout & behavior
Accessibility
Props — Slider
View MUI docs| Prop | Type | Description |
|---|---|---|
size | "large" | "medium" | "small" | "extraSmall" | Label and helper type scale. |
sentiment | "default" | "error" | Field-level error styling. |
label | ReactNode | Field label above the control. |
displayValue | ReactNode | Custom value shown in the label row. |
showDisplayValue | boolean | Show current value beside the label. |
showLabelRow | boolean | Show the label and value row. |
helperText | ReactNode | Helper or validation message below. |
helperIconName | FaIconName | Optional icon beside helper text. |
showHelper | boolean | Show helper row when helperText is set. |
showControls | boolean | Show ± buttons beside the track (nudge by step). |
showTicks | boolean | Show value labels under the track. Follows step; continuous (step=null) shows only min and max. |
startsFrom | "side" | "center" | Track fill origin. "side" fills min→value (0…100); "center" is bipolar around 0 (−100…100). |
min | number | Range minimum. Defaults to 0 (side) or -100 (center). |
max | number | Range maximum. Default 100 for side and center. |
width | number | string | Control width. Numbers are px. Ignored when fullWidth. |
fullWidth | boolean | Stretch to 100% of the parent. |
value | number | number[] | Controlled value. |
defaultValue | number | number[] | Uncontrolled initial value. Defaults to 50 (side) or 0 (center). |
step | number | null | Value increment for drag, ±, and tick labels. null = continuous (endpoint ticks only). |
disabled | boolean | Disables interaction. |
onChange | (event, value, activeThumb) => void | Called when the value changes. |
aria-label | string | Accessible name for the slider. |