شريط تمرير

Slider

شريط تمرير متاح الوصول في React لقيمة واحدة أو نطاق بمقبضين، مع عرض حي للقيمة وتنسيق مخصّص وأحجام وربط للحقل. يعمل بلوحة المفاتيح وفي الاتجاه العربي.

افتح في ستوري بوك ↗

مرر number لمقبض واحد أو number[] لمدى. يضيف showValue قراءة حية ويصيغها formatValue.

متى تستخدمه

استخدم Slider حين يهمّ موضع القيمة في نطاق أكثر من الرقم الدقيق، مثل شريحة ميزانية أو درجة رضا. مرّر مصفوفة لنطاق بمقبضين. إن كان على المستخدم إدخال قيمة دقيقة فاقرنه بـ NumberInput أو استخدم NumberInput وحده.

فعّل showValue لتظهر القيمة الحالية دون تخمين.

أمثلة

قيمة مفردة مع عرض

مستوى الصوت

نطاق (مقبضان)

نطاق السعر

صيغة النسبة المئوية

التكبير

صغير ومعطّل

السطوع

مقفل

الخصائص

الخصائص التي يعرّفها Slider. سمات العنصر الأصلي تمرّ كما هي.

الخاصية	النوع	الوصف
`value`	`SliderValue`	Controlled value. `number` → single thumb, `number[]` → one thumb each.
`defaultValue`	`SliderValue`	Uncontrolled initial value. Defaults to a single thumb at `min`.
`onValueChange`	`(value: SliderValue) => void`	Fires continuously while dragging. Shape mirrors `value`/`defaultValue`.
`onValueCommit`	`(value: SliderValue) => void`	Fires once on release (pointer up / keyboard commit).
`label`	`react.ReactNode`	Visible field label, associated to the thumb(s) via `aria-labelledby`.
`helperText`	`react.ReactNode`	Hint shown below the field. Hidden while an error message is showing.
`errorMessage`	`react.ReactNode`	Message shown below the field when `error` is true.
`error`	`boolean`	Marks the field invalid: sets `aria-invalid` and error styling.
`size`	`"sm" \| "md"`	Control size. Scales rail, thumb, label, and helper text. Defaults to `md`.
`showValue`	`boolean`	Render the current value(s) as text beside the label.
`formatValue`	`(value: number) => string`	Formats each value for `showValue` and the thumb's `aria-valuetext` (e.g. percentages or currency).
`thumbLabels`	`[string, string]`	Accessible names for the two range thumbs. Ignored for single thumbs. Defaults to `['Minimum', 'Maximum']`.
`name`	`string`
`disabled`	`boolean`
`orientation`	`"vertical" \| "horizontal"`
`dir`	`Direction`
`min`	`number`
`max`	`number`
`step`	`number`
`minStepsBetweenThumbs`	`number`
`inverted`	`boolean`
`form`	`string`

إمكانية الوصول

كل مقبض يحمل الدور slider مع القيمة الحالية وaria-valuetext من formatValue، فيسمع قارئ الشاشة «25 بالمئة» بدل رقم خام. تحرّك مفاتيح الأسهم بمقدار step، ويتحرّك Page Up وPage Down أسرع، ويقفز Home وEnd إلى الحدّين.

سمِّ المقابض المتعدّدة بـ thumbLabels. ينعكس المسار في الاتجاه العربي فتبقى مفاتيح الأسهم طبيعية.