Slider

Cập nhật lần cuối: 16/04/2025

import { Slider } from "zmp-ui";

Dùng để cho phép người dùng lựa chọn giá trị, hoặc khoảng giá trị trong một giới hạn

Ví dụ

Bảng thuộc tính

SliderProps

Name	Type	Default	Description
defaultValue	number|Tuple		Tương tự như value, nhưng giá trị này chỉ được sử dụng để khởi tạo giá trị cho slider khi nó được render lần đầu tiên. Thay đổi giá trị này sau khi render sẽ không có tác dụng.
label	string		Nhãn của slider, được hiển thị phía trên slider.
marks	boolean|number[]	false	Các điểm cần đánh dấu trên slider. Thiết lập true sẽ đánh dấu ứng với mỗi step trên slider. Nếu chỉ cần đánh dấu một vài giá trị tuỳ ý, truyền vào một mảng các giá trị cần được dánh dấu.
max	number	100	Giá trị kết thúc của slider.
min	number	0	Giá trị bắt đầu của slider.
minRange	number		Khoảng cách tối thiểu giữa 2 giá trị được chọn của slider. Chỉ có tác dụng khi sử dụng với range slider (value là một mảng 2 phần tử).
name	string		Tên định danh của slider trong form.
prefix	React.ReactNode		Phần tử được hiển thị ở bên trái slider.
renderValue	(value: number | Tuple) => React.ReactNode		Hàm dùng để định dạng giá trị hiển thị khi showValue được bật. Hàm này nhận vào (các) giá trị được chọn của slider và trả về một ReactNode để hiển thị.
showValue	boolean	false	Hiển thị giá trị hiện tại của slider ở góc trên bên phải, ngang hàng với label. Có thể sử dụng cùng với renderValue nếu cần bổ sung cơ chế tính toán hoặc tuỳ chỉnh nội dung cho giá trị hiển thị.
step	number	1	Bước nhảy của slider. Có thể là một số nguyên hoặc số thập phân.
suffix	React.ReactNode		Phần tử được hiển thị ở bên phải slider.
value	number|Tuple		Giá trị được chọn hiện tại của slider (đối với slider một con trỏ) và mảng chứa 2 giá trị được chọn (đối với slider 2 con trỏ, còn gọi là range slider). Cần được sử dụng cùng với onChange để cập nhật giá trị khi người dùng thay đổi.
onChange	(value: number | Tuple) => void		Callback được gọi khi giá trị của slider thay đổi. Tham số truyền vào là giá trị hoặc cặp giá trị mới của slider.

SliderMarkProps

Name	Type	Default	Description
filled	boolean	false	Điểm đánh dấu có nằm trong ngưỡng được chọn hay không.
position	number		Vị trí của điểm cần đánh dấu trên slider, theo đơn vị phần trăm.

SliderTrackProps

Name	Type	Default	Description
children	React.ReactNode
marks	SliderMarks		Các điểm cần đánh dấu trên slider. Thiết lập true sẽ đánh dấu ứng với mỗi step trên slider. Nếu chỉ cần đánh dấu một vài giá trị tuỳ ý, truyền vào một mảng các giá trị cần được dánh dấu.
offset	number		Thụt lề của slider, theo đơn vị phần trăm.
width	number		Độ dày của thanh slider, theo đơn vị phần trăm.
onMouseEnter	React.MouseEventHandler
onMouseLeave	React.MouseEventHandler

SliderThumbProps

Name	Type	Default	Description
position	number		Vị trí của con trỏ trên slider, theo đơn vị phần trăm.