شريط التمرير

يتيح شريط التمرير للمستخدمين اختيار قيمة على مسار مستمر بسحب المقبض. يدعم مواضع تسمية متعددة وتخطيط RTL والنطاق الكامل من 0% إلى 100%.

Loading demo: slider-real-world

التثبيت

npx sdaia-ui@latest add slider

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

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

شريط التمرير مع تسمية سفلية.

Loading demo: slider-bottom-label

شريط التمرير مع تسمية عائمة.

Loading demo: slider-floating-label

شريط التمرير بلا تسمية.

Loading demo: slider-no-label

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

Prop	Type	Default	Required
value	number	—	optional
defaultValue	number	50	optional
onChange	(value: number) => void	—	optional
label	'inline' \| 'bottom' \| 'top-floating' \| 'bottom-floating' \| 'none'	—	optional
dir	'ltr' \| 'rtl'	—	optional
leadingIcon	boolean	—	optional
trailingIcon	boolean	—	optional
formatValue	(value: number) => string	—	optional
disabled	boolean	false	optional