شريط تمرير
Sliderشريط تمرير متاح الوصول في React لقيمة واحدة أو نطاق بمقبضين، مع عرض حي للقيمة وتنسيق مخصص وأحجام وربط للحقل. يعمل بلوحة المفاتيح وفي الاتجاه من اليمين إلى اليسار.
مرر number لمقبض واحد أو number[] لنطاق. تضيف showValue عرضاً حياً للقيمة، وتنسقه formatValue.
متى تستخدمه
استخدم Slider حين يهم موضع القيمة في نطاق أكثر من الرقم الدقيق، مثل نطاق الميزانية أو درجة الرضا. مرر مصفوفة لنطاق بمقبضين. إذا كان على المستخدم إدخال قيمة دقيقة، اقرن 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. ينعكس المسار في الاتجاه من اليمين إلى اليسار لتبقى حركة مفاتيح الأسهم طبيعية.