شريط التمرير النطاقي

يتيح شريط النطاق للمستخدمين اختيار نطاق قيمي بمقبضَين قابلَين للسحب، مع تسميات قابلة للإعداد ودعم RTL.

Loading demo: range-slider-real-world

التثبيت

npx sdaia-ui@latest add range-slider

import { RangeSlider } from "@/components/ui/range-slider"

<RangeSlider defaultValue={[20, 80]} />

شريط نطاق بالنمط الافتراضي.

Loading demo: range-slider-default

شريط نطاق مع التسمية عائمة في الأسفل.

Loading demo: range-slider-bottom-floating

شريط نطاق مع تسمية القيمة موضوعة أسفل المسار.

Loading demo: range-slider-bottom-label

خصائص مكوّن RangeSlider.

Prop	Type	Default	Required
value	[number, number]	-	optional
defaultValue	[number, number]	[20, 80]	optional
onChange	(value: RangeSliderValue) => void	-	optional
min	number	0	optional
max	number	100	optional
step	number	1	optional
label	'inline' \| 'bottom' \| 'top-floating' \| 'bottom-floating' \| 'none'	'inline'	optional
direction	'ltr' \| 'rtl'	'ltr'	optional
leadingIcon	boolean	false	optional
trailingIcon	boolean	false	optional
disabled	boolean	false	optional
formatValue	(value: number) => string	-	optional