Yugen UI

Slider

Slider cho phép chọn một giá trị (hoặc khoảng) trong dải liên tục bằng cách kéo thumb.

Dùng khi giá trị chính xác không quan trọng bằng cảm giác tương đối (âm lượng, độ sáng). Hỗ trợ bàn phím: mũi tên, Home/End, PageUp/PageDown.
Độ sáng70

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Slider } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

60

Kèm icon & giá trị

Controlled với value / onValueChange.

Khoảng giá (US$)20 – 60

Khoảng & bước

Hai thumb cho khoảng giá trị; step để nhảy theo bước.

Kích thước & disabled

small, medium (mặc định).

Âm lượng

Glass (Yugen Labs)

Nhấn hoặc kéo: thumb thành glass và to ra, thấy thanh trượt qua nó.

Cách dùng

Nên
  • Luôn có label hoặc aria-label.
  • Hiện giá trị (showValue) khi con số có ý nghĩa với người dùng.
Không nên
  • Không dùng Slider khi cần nhập số chính xác — dùng SpinButton.
  • Không dùng cho dải quá rộng mà bước nhỏ (khó kéo chính xác).

Props

Prop · KiểuMặc địnhMô tả
value / defaultValuenumber[]Mặc định: —Một phần tử = 1 thumb, hai phần tử = khoảng.
onValueChange(value: number[]) => voidMặc định: —Callback khi kéo.
min / max / stepnumberMặc định: 0 / 100 / 1Dải và bước.
size"small" | "medium"Mặc định: "medium"Thumb 16 / 20px.
label / showValueReactNode / booleanMặc định: —Nhãn và giá trị hiển thị phía trên.
rootClassNamestringMặc định: —Class cho khối ngoài (đặt width).
material"glass"Mặc định: —Yugen Labs — thumb thành glass và to ra khi đang nhấn / kéo.