البناء · جديد

المنزلق

اختيار قيمة أو نطاق بالسحب أو بلوحة المفاتيح، حين تكون القيمة التقريبية كافية مثل مستوى الصوت أو التكبير أو نطاق السعر.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/slider

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

import { Slider } from "@/components/ui/slider";

<Slider aria-label="Volume" defaultValue={40} />
<Slider aria-label="Price" min={0} max={1000} step={50} defaultValue={[200, 800]} />

من xs إلى xl: مسار بسماكة 16 و24 و40 و56 و96 بكسل.

‏handleStyle="circle"، وshowStops يضع نقطة عند كل خطوة حين لا يُسمح إلا بقيم محددة.

يمتلئ من منتصف النطاق نحو القيمة، للقيم التي تنزل تحت الصفر أو تعلوه.

قيمتان [من، إلى] بمقبضين، وكل مقبض باسمه لقارئ الشاشة.

يمتلئ من الأسفل في الاتجاهين؛ الأسهم للأعلى والأسفل.

الخاصية	النوع	الافتراضي	الوصف
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"xs"`	خاصية Size: من XSmall إلى XLarge.
`handleStyle`	`"line" \| "circle"`	`"line"`	خاصية Handle style.
`showStops`	`boolean`	`false`	خاصية Show stops: نقطة عند كل `step`. بدونها تبقى نقطة عند نهاية المسار الفارغ.
`centered`	`boolean`	`false`	‏Centered slider في Figma: يمتلئ من منتصف النطاق.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	‏Vertical slider في Figma.
`value / defaultValue`	`number \| [number, number]`		رقم، أو `[من، إلى]` لـRange slider.
`min / max / step`	`number`	`0 / 100 / 1`	حدود القيمة ومقدار الخطوة.
`largeStep`	`number`	`10`	خطوة Page Up وPage Down.
`onValueChange / onValueCommitted`	`(value) => void`		أثناء السحب، وعند الإفلات.
`showValue`	`boolean`	`true`	فقاعة القيمة أثناء السحب أو عند التركيز من لوحة المفاتيح.
`format`	`Intl.NumberFormatOptions`		طريقة كتابة القيمة في الفقاعة ولقارئ الشاشة (عملة، نسبة).
`numerals`	`"latn" \| "arab"`		نظام الأرقام؛ الافتراضي من `KanzProvider`.
`disabled`	`boolean`	`false`	‏State = Disabled.
`aria-label`	`string`		اسم المنزلق («مستوى الصوت»).

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`ArrowRightArrowUp`	يزيد خطوة. في العربية يزيد ArrowLeft.
`ArrowLeftArrowDown`	ينقص خطوة. في العربية ينقص ArrowRight.
`PageUpPageDown`	يزيد أو ينقص بمقدار `largeStep`.
`HomeEnd`	إلى الحد الأدنى أو الأقصى.

كل مقبض role="slider" مع aria-valuemin وaria-valuemax وaria-valuenow، ونص القيمة بالتنسيق والأرقام نفسها.
في النطاق يُسمّى المقبضان «…، من» و«…، إلى».
للمبالغ الدقيقة مثل مبلغ التحويل استخدم حقلًا، أو أضف حقلًا بجانب المنزلق.

الأرقام: فقاعة القيمة ونص قارئ الشاشة بنظام الأرقام المختار (٠-٩ أو 0-9) وبتنسيق اللغة.
الخط العربي: ‏label-14 بوزن Medium في الفقاعة.
النص ثنائي الاتجاه: القيمة معزولة في الفقاعة، فتبقى العملة والإشارة في مكانهما.