Component

Slider

Single-value or two-thumb range slider (wraps Base UI Slider).

Basic

Volume

Range

Pass a two-number defaultValue for a dual-thumb range.

Price range

20 – 80

Min / max / step

Constrain the range and snap to a step.

Rating

6.5

Sizes

Small

Medium (default)

Large

size accepts sm | md (default) | lg, scaling both the track and thumb.

Tones

tone recolors the filled track and thumb with the decorative palette.

default

forest

sun

fire

water

API reference

Prop	Type	Default	Description
aria-label	string	None	Accessible name when there is no visible `label`. Applied to the focusable `role="slider"` thumb(s), not the group; range thumbs share it, so use `getAriaLabel` to tell them apart.
aria-labelledby	string	None	Points at an existing visible label's id, as an alternative to `aria-label`. Names every thumb.
className	string	None	CSS class applied to the element, or a function that returns a class based on the component's state.
getAriaLabel	((index: number) => string)	None	Per-thumb accessible name by index, e.g. `(index) => (index === 0 ? "Minimum price" : "Maximum price")`. Overrides `aria-label`.
label	React.ReactNode	None	Text above the track. Also the control's accessible name.
showValue	boolean	false	Shows the current numeric value next to the label.
size	ComponentSize	"md"	Track thickness and thumb size. Default "md".
tone	ComponentTone	"default"	Color of the filled track. Default "default".

aria-labelNone

string

Accessible name when there is no visible `label`. Applied to the focusable `role="slider"` thumb(s), not the group; range thumbs share it, so use `getAriaLabel` to tell them apart.

aria-labelledbyNone

string

Points at an existing visible label's id, as an alternative to `aria-label`. Names every thumb.

classNameNone

string

CSS class applied to the element, or a function that returns a class based on the component's state.

getAriaLabelNone

((index: number) => string)

Per-thumb accessible name by index, e.g. `(index) => (index === 0 ? "Minimum price" : "Maximum price")`. Overrides `aria-label`.

labelNone

React.ReactNode

Text above the track. Also the control's accessible name.

showValuefalse

boolean

Shows the current numeric value next to the label.

size"md"

ComponentSize

Track thickness and thumb size. Default "md".

tone"default"

ComponentTone

Color of the filled track. Default "default".

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/slider").Slider.Root>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent