Component · 24

Slider

Pick a number, or a range, by dragging a block along a ruled line or with the arrow keys. A real slider for assistive technology, and it submits with forms. Built on Base UI.

Basic

Volume

tsx

<Slider label="Volume" defaultValue={40} showValue />

Steps

Arrow keys move one step; Home and End jump to the ends; Page Up and Page Down move by largeStep.

Rating

tsx

<Slider label="Rating" defaultValue={3} min={1} max={5} step={1} showValue />

Range

Pass an array. Give each thumb its own name, or screen reader users cannot tell them apart.

Price

$20 – $80

tsx

<Slider
  label="Price"
  defaultValue={[20, 80]}
  thumbLabels={["Minimum price", "Maximum price"]}
  format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
  showValue
/>

Disabled

Brightness

tsx

<Slider label="Brightness" defaultValue={60} disabled />

Props

Prop	Type	Default	Description
value / defaultValue	number \| number[]	-	One number for one thumb, an array for a range.
onValueChange	(value) => void	-	Called continuously while dragging.
onValueCommitted	(value) => void	-	Called once when the person lets go. Use it to save or fetch.
min / max / step	number	0 / 100 / 1	The range and the size of one step.
largeStep	number	10	How far Page Up, Page Down and Shift + arrow move.
label	ReactNode	-	Visible name. Without it, pass aria-label.
showValue	boolean	false	Show the current value beside the label.
thumbLabels	string[]	-	One accessible name per thumb. Needed for a range.
format	Intl.NumberFormatOptions	-	How the value is written, e.g. a currency.
orientation	"horizontal" \| "vertical"	"horizontal"	Vertical needs a height on the slider's parent.
disabled / name / form	-	-	Disable it, or submit its value with a form.