Slider
Preview appears after the next Storybook update.
<Slider />When to use
Use it for
- Approximate values where the position matters more than the exact number: opacity, threshold, zoom.
- A range with two thumbs: pass an array of two numbers.
- Live previews: update on onValueChange, save on onValueCommitted.
Not for
- An exact number the user knows: use NumberField.
- Very large ranges where one step is tiny: pair it with a NumberField or use NumberField alone.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Show the value and its unit
format makes the value readable: 48%, 4.5, 16 px.
A slider for precise input
Dragging to exactly 37 is frustrating. Use NumberField when the exact number matters.
Accessibility
- Base UI Slider: each thumb is a native range input with role slider, aria-valuenow and aria-valuetext from format.
- Arrow keys step, Page Up and Page Down or Shift+arrow use largeStep, Home and End jump to min and max.
- Range thumbs are named "<label> minimum" and "<label> maximum"; override with thumbLabels.
- The filled range uses the signal color (3:1 on the muted track); focus rings the thumb.
Content guidelines
- Label names the quantity: "Minimum contrast", not "Slide to adjust".
- Use the hint for what the value affects.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Slider/Slider.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Container
.root - Hit area
.control - Track
.track - Filled range
.indicator - Thumb
.thumb - Thumb, focus
.thumb:has(:focus-visible) - Formatted value
.value - Container
.root[data-invalid] .indicator - Container
.root[data-invalid] .thumb - Container
.root[data-disabled] .indicator - Container
.root[data-disabled] .thumb - Container
.root[data-disabled] .value
Motion and interaction
Slider has motion in code that this page cannot list yet: try it in the preview.
With reduced motion turned on, its changes happen at once.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Slider/Slider.tsx, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | none | Visible label. When set, the Slider wraps itself in a Field. Leave unset inside a Field. |
hint | ReactNode | none | No description in the code yet. |
error | ReactNode | none | No description in the code yet. |
value | number | number[] | none | A number for one thumb, an array of two numbers for a range. |
defaultValue | number | number[] | none | No description in the code yet. |
onValueChange | (value: number | number[]) => void | none | Fires while dragging. |
onValueCommitted | (value: number | number[]) => void | none | Fires once when the user releases the thumb or stops pressing keys. Use it for expensive work. |
min | number | none | No description in the code yet. |
max | number | none | No description in the code yet. |
step | number | none | No description in the code yet. |
largeStep | number | none | Step for Page Up, Page Down and Shift+arrow. Default 10. |
format | Intl.NumberFormatOptions | none | Intl format for the displayed value, for example `{ style: 'percent' }`. |
showValue | boolean | true | Show the formatted value at the end of the track. Default true. |
thumbLabels | string[] | none | Accessible names of the thumbs when there is no visible label, or to name range ends. |
name | string | none | No description in the code yet. |
disabled | boolean | none | No description in the code yet. |
hideLabel | boolean | none | No description in the code yet. |
className | string | none | No description in the code yet. |
Playground
Change the props and see the real Slider update. Controls are generated from the TypeScript props; nothing here changes the system.
<Slider label="Minimum contrast" />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Slider in Storybook).
Embed Storybook stories here (4)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Default
Range
Percent
AllStates
From the code Generated from the component, not editable here.
Changelog
- Fix
Homepage hero: the drag slider is replaced by the approved illustration
v1.0.0, Nov 11, 2026