المنزلق
حقل إدخال نطاق مصقول بلغة BoardUI المرئية - مسار محايد غائر، تحديد بتدرج أزرق، أزرار تمرير بارزة، وفقاعات قيمة دقيقة. استخدم Slider لقيمة واحدة أو RangeSlider لتحديد الحد الأدنى/الأقصى؛ كلاهما يتضمن حقول إدخال مخفية يمكن الوصول إليها، وسلوك السحب، وعناصر تحكم لوحة المفاتيح، ودعم RTL عبر React Aria.
التثبيت
يمكنك إضافة مكوّن شريط التمرير باستخدام CLI الخاص بنا أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add sliderهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
النطاق الأدنى والأقصى
RangeSlider يعرض مؤشرَين مُعنوَنَين. يملأ النطاق المحدد المسافة بينهما، ويعرض كل فقاعة قيمتها الدقيقة، ولا يمكن للمؤشرين أن يتقاطعا. استخدم minValue, maxValue، و step لتحديد النطاق المسموح به.
<RangeSlider label="Price range" defaultValue={[200, 800]} minValue={0} maxValue={1000} step={50} formatValue={(value) => currency.format(value)}/>القيم المتحكَّم بها
استخدام القيمة و onChange للحالة المتحكَّم بها المباشرة. onChangeEnd يُطلَق بعد انتهاء السحب أو إدخال لوحة المفاتيح، وهو مفيد لحفظ قيمة دون إرسال تحديث عند كل حركة.
const [volume, setVolume] = useState(40);const [priceRange, setPriceRange] = useState([200, 800]);
<Slider value={volume} onChange={setVolume} />
<RangeSlider value={priceRange} onChange={setPriceRange} onChangeEnd={(range) => saveRange(range)}/>فقاعات القيم والحالات
فقاعات القيمة الدقيقة مرئية افتراضياً. نسّقها باستخدام formatValue، أو اضبط showTooltip=false عندما تظهر القيمة في مكان آخر. تحتفظ شرائط التمرير المعطَّلة بقيمها وتسمياتها الوصولية مع منع الإدخال.
<Slider defaultValue={64} />
{/* Hide the exact-value bubble when the surrounding UI shows the value */}<Slider defaultValue={36} showTooltip={false} />
<RangeSlider defaultValue={[20, 70]} isDisabled />