Slider
A Slider allows users to set a value, or a range between two values, by moving a thumb along a track.
When to Use
- for a value between two limits that users don’t need to enter exactly, such as a deposit set in steps of 5
- for a range, with two thumbs, such as an hourly rate between $60 and $140
When Not to Use
- for an exact number, such as an invoice amount (use an Input)
- to choose from a few named options (use a Radio Group or a Select)
- to show how far a task has progressed (use the Progress component, which accepts no input)
Anatomy
| Element | Usage |
|---|---|
| Range | Required |
| Thumb | Required |
| Track | Required |
| Focus outline | Keyboard focus only |
| Second thumb | Range only |
Slider renders no label and no number. For the label and the description, use a Field, or use a Label outside a Field.
Behavior
Users drag a thumb to move it. When they click the track, the thumb moves to that point and receives focus.
Thumbs
Pass a number for one thumb, or an array for several: Slider renders one thumb for every item in the array.
Steps
By default, step is 1. When users drag a thumb, click the track, or press an arrow key, the value changes in multiples of step, counted from min.
Range
If the Slider has two values, the range is filled between the thumbs. By default, when users drag one thumb into the other, it pushes the other along. If you want to change this, use thumbCollisionBehavior. When users move a thumb with the keys, it stops at the value of the other.
Vertical
To make the Slider vertical, set orientation="vertical". A vertical Slider is as tall as its container and at least 160px tall.
Accessibility
A native input of type range is inside each thumb. The input receives focus and the keys, and the browser provides its slider role.
Keyboard
| Key | Result |
|---|---|
Tab | Moves focus to the thumb. In a range, it moves to the first thumb, then to the second. |
ArrowRight or ArrowUp | Raises the value by step |
ArrowLeft or ArrowDown | Lowers the value by step |
PageUp or PageDown, or an arrow key with Shift | Raises or lowers the value by largeStep, which is 10 by default |
Home | Sets the value to min |
End | Sets the value to max |
Requirements
FieldLabel, set an id on a Label and pass that id to aria-labelledby, or set aria-label.Installation
npx shadcn@latest add @summit/sliderUsage
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
<div className="grid gap-3">
<Label id="deposit">Deposit</Label>
<Slider aria-labelledby="deposit" defaultValue={[30]} step={5} />
</div>;A Range
For a range, pass two values.
<Slider aria-labelledby="rate" defaultValue={[25, 75]} step={5} />Show the Value
Slider doesn’t display a number. To show the value, keep it in state with value and onValueChange, and display it next to the Slider.
import { useState } from 'react';
const [range, setRange] = useState([60, 140]);
<>
<p>
Between ${range[0]} and ${range[1]} an hour.
</p>
<Slider
aria-labelledby="rate"
value={range}
onValueChange={(value) => setRange(Array.isArray(value) ? [...value] : [value])}
max={200}
step={5}
/>
</>;API Reference
Slider adds no props. It sets thumbAlignment to edge and passes aria-label to each thumb. Other props are passed to the root of Base UI’s Slider. See the Base UI Slider documentation for step, largeStep, minStepsBetweenValues, thumbCollisionBehavior, and onValueCommitted.