Slider
Mẫu chuẩnChọn một giá trị trên một dải liên tục hoặc chia bước, thấy ngay tác động khi kéo.
Playground
Đổi brand, theme, trạng thái và bước nhảy. Slider kéo được thật và đổi được bằng bàn phím.
Giá trị hiện tại: 40. Kéo, hoặc Tab tới rồi dùng mũi tên / Home / End / PageUp / PageDown.
import { Slider } from "@nexobox/ui";
<Slider defaultValue={[40]} max={100} step={5} aria-label="Ngưỡng cảnh báo" />Khi nào sử dụng
Nên dùng
Chọn một giá trị trên một dải liên tục hoặc chia bước, khi giá trị gần đúng là đủ và người dùng cần thấy ngay tác động khi kéo — âm lượng, ngưỡng cảnh báo, độ mờ, khoảng thời gian ước lượng.
Tránh dùng
Cần một con số chính xác, gõ tay được — đó là Input. Bật/tắt một hiệu lực tức thời — đó là Switch.
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Root | Cao --nf-foundation-size-icon-small (16 px) — bằng Thumb, hàng không nhảy. |
| 2 | Track | Cao --nf-foundation-space-1 (4 px), bo --nf-foundation-radius-pill. |
| 3 | Range | Đoạn đã đi qua, phủ từ đầu Track đến Thumb. |
| 4 | Thumb | Vuông 16 px, bo tròn, viền 1 px. Nhận focus và phím tắt. |
Wrapper render đúng một Thumb. Slider hai đầu (range) — không có: truyền value hai phần tử không tạo thumb thứ hai, giá trị đó vô hình.
Variants & states
Không có variant. Không có size — Thumb luôn 16 px, không đổi theo mật độ trang. Không có ô hiện số, không có marks/ticks, không có tooltip giá trị — consumer tự dựng nếu cần.
Track border-control, Range và viền Thumb action-primary.
Không có lớp hover riêng. Primitive chỉ đổi con trỏ thành pointer trên Thumb.
Outline theo --nf-component-focus-*, trên Thumb. Ảnh mô phỏng bằng class xem trước, không phải Tab thật.
Không có lớp riêng cho lúc kéo. Kéo Thumb thật ở Playground phía trên để thấy nó bám con trỏ không trễ.
Track, Range và viền Thumb chuyển màu disabled, con trỏ not-allowed.
Loading, error, empty: không có. Slider không bất đồng bộ.
Design tokens
Giá trị theo NexoCrew / light đang chọn trong playground. Track đọc --nf-semantic-border-control, Range đọc --nf-semantic-action-primary-background, viền Thumb đọc --nf-semantic-action-primary-border. Disabled chuyển Track, Range và viền Thumb sang --nf-component-button-disabled-background. Density: không có, kích thước đến từ token cố định, không đọc data-nexo-density.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| value | — | Chế độ controlled. Mảng một phần tử — phần tử thứ hai không có thumb để bám. |
| defaultValue | — | Chế độ uncontrolled, cùng ràng buộc một phần tử. |
| onValueChange | — | Phát liên tục trong lúc kéo hoặc khi phím tắt đổi giá trị. |
| onValueCommit | — | Phát một lần khi thả chuột hoặc rời phím — dùng để lưu. |
| min | 0 | |
| max | 100 | |
| step | 1 | |
| disabled | false | |
| orientation | "horizontal" | Wrapper chỉ dựng hình học ngang. "vertical": không có. |
| dir | — | "ltr" | "rtl". Đảo hướng phím mũi tên trái/phải. |
| inverted | false | Đảo hướng track mà không đổi dir. |
| minStepsBetweenThumbs | 0 | Chỉ có ý nghĩa khi nhiều thumb — không áp dụng ở đây. |
| name | — | Tên trường khi submit form. |
| asChild | false | Của Radix. |
SliderProps = ComponentPropsWithoutRef<typeof SliderPrimitive.Root> — id, className, style và mọi thuộc tính gốc đều truyền thẳng xuống Root, ghép chứ không ghi đè.