Component
Slider
Picks a number, or a range of two, by dragging a thumb along a track: a volume, a price range, a zoom level. The track is the soft gray fill with an accent range up to the thumb; the arrow keys move it one step.
Xem trước
import { Slider } from "@/components/ui/slider"
<div className="flex w-full max-w-xs flex-col gap-sm">
<span id="preview-slider-label" className="text-sm font-medium text-text-primary">Volume</span>
<Slider aria-labelledby="preview-slider-label" defaultValue={[60]} />
</div>Cách dùng
Khi nào dùng
- Pick a number where the feel matters more than the exact value: volume, zoom, brightness.
- Pick a range between two values, such as a price filter.
Khi nào không dùng
- An exact number, such as a quantity. Use Input.
- A few named choices. Use RadioGroup, or Select for a long list.
- Showing how much of a task is done. Use Progress.
Biến thể
orientation
horizontal fills the width of its parent. vertical fills the height of its parent, at least 160px.
import { Slider } from "@/components/ui/slider"
<div className="flex w-full max-w-xs flex-col gap-sm">
<span id="preview-slider-label-orientation-horizontal" className="text-sm font-medium text-text-primary">Volume</span>
<Slider aria-labelledby="preview-slider-label-orientation-horizontal" defaultValue={[60]} />
</div>
<div className="flex h-40 flex-col items-center gap-sm">
<span id="preview-slider-label-orientation-vertical" className="text-sm font-medium text-text-primary">Volume</span>
<Slider aria-labelledby="preview-slider-label-orientation-vertical" defaultValue={[60]} orientation="vertical" />
</div>Ví dụ
Volume
import { Slider } from "@/components/ui/slider"
<div className="flex w-full max-w-xs flex-col gap-sm">
<span id="volume-label" className="text-sm font-medium text-text-primary">Volume</span>
<Slider aria-labelledby="volume-label" defaultValue={[60]} />
</div>Price range
Two values make two thumbs, each with its own name.
import { Slider } from "@/components/ui/slider"
<Slider aria-label="Price" thumbLabels={["Minimum price", "Maximum price"]} defaultValue={[20, 80]} step={5} className="max-w-xs" />Disabled
import { Slider } from "@/components/ui/slider"
<Slider aria-label="Brightness" defaultValue={[30]} disabled className="max-w-xs" />Nên và không nên
Nên
- Use it when the exact number matters less than the feel: volume, zoom, a rough price range.
- Show the value next to it, and let users type an exact one in an Input when it matters.
- Save in onValueCommit, not in onValueChange, so a drag doesn't send a request per step.
Không nên
- Don't use it for a precise number such as a quantity; use Input.
- Don't use it for a few named choices; use RadioGroup or Select.
- Don't use it to show progress; use Progress.
Props
| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
|---|---|---|---|---|
| defaultValue | number | - | - | One number per thumb, as an array: [40], or [20, 80] for a range. The value on first render, when you don't control it. |
| value | number | - | - | The values as an array, when you control them. Pair it with onValueChange. |
| onValueChange | function | - | - | Called with the new values on every step, while dragging too. Update what the slider previews here. |
| onValueCommit | function | - | - | Called once when the user lets go or presses a key. Save or fetch here. |
| min | number | - | 0 | The lowest value. |
| max | number | - | 100 | The highest value. |
| step | number | - | 1 | How far one arrow key press moves the thumb. |
| orientation | enum | horizontal | vertical | horizontal | horizontal fills the width of its parent. vertical fills the height of its parent, at least 160px. |
| disabled | boolean | - | false | Can't be focused or moved; the range and the thumbs turn to the disabled color. |
| name | string | - | - | Form name. Inside a form, each value is submitted under it. |
| thumbLabels | string | - | - | Optional string[] with one accessible name per thumb, in order, for a range (Minimum price, Maximum price). Each name replaces aria-label on its thumb. (The spec schema has no array type, so it is declared as string.) |
Cấu tạo
| Phần | Mô tả |
|---|---|
| root | Slider: a row as wide as its parent (a column when vertical), 20px tall, that holds the track and the thumbs. |
| track | The track: 4px, radius-full, the soft gray fill. |
| range | The range: the accent fill from min to the thumb, or between the two thumbs of a range. |
| thumb | A thumb: a 16px circle on the raised fill with the control border. Hover and pressed layer the neutral overlays; focus shows the ring. |
| hitArea | Transparent ::before centered on each thumb, never smaller than size-target-min. |
Khả năng truy cập
Role: slider
| Phím | Hành động |
|---|---|
| ArrowRight, ArrowUp | Raises the value by one step. |
| ArrowLeft, ArrowDown | Lowers the value by one step. |
| PageUp, PageDown | Raises or lowers the value by ten steps. |
| Home, End | Sets the value to min or max. |
| Tab | Moves to the next thumb; each thumb is its own tab stop. |
- Each thumb is a slider with aria-valuenow, aria-valuemin and aria-valuemax. The type requires aria-label or aria-labelledby on Slider, which every thumb takes; give each thumb of a range its own name with thumbLabels (Minimum price, Maximum price).
- Show the value in text next to the slider when it matters; the thumb's position alone is hard to read exactly.
- The thumb is 16px, but its hit area is size-target-min (24px on mouse, 44px on touch).
- Disabled slides nowhere and turns the range and the thumb to the disabled color.
Cài đặt
npx shadcn add https://werewolf-ui.vercel.app/r/slider.jsonLệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").