اسلایدر (Slider)

معرفی

کامپوننت Slider برای انتخاب مقدار با کشیدن استفاده می‌شود.

چه زمانی استفاده نکنیم:

• وقتی مقدار دقیق مهم است — از Input type="number" استفاده کنید
• برای انتخاب از لیست گزینه‌های گسسته — از Select یا RadioGroup استفاده کنید

استفاده

import { Slider } from '@parto-system-design/ui'

export default function MyComponent() {
  return <Slider defaultValue={[50]} max={100} step={1} />
}

زمین بازی

با تغییر تنظیمات زیر، اسلایدر را به صورت زنده مشاهده کنید.

import { Slider } from '@parto-system-design/ui'

<Slider />

حالت‌ها و انواع

پیش‌فرض

عمودی

<Slider orientation="vertical" defaultValue={[50]} className="h-44" />

غیرفعال

<Slider defaultValue={[30]} disabled />

محدوده (Range)

<Slider defaultValue={[25, 75]} />

راهنمای استفاده

Props

نکات

• جهت از dir سند HTML خودکار تشخیص داده می‌شود (RTL/LTR)
• برای جلوگیری از فراخوانی مکرر API، از onValueCommit (نه onValueChange) استفاده کنید

دسترسی‌پذیری

• نقش slider از Radix UI به‌صورت خودکار اعمال می‌شود
• مقادیر aria-valuemin، aria-valuemax و aria-valuenow توسط Radix مدیریت می‌شوند
• با aria-label یا aria-labelledby برچسب‌گذاری کنید

کامپوننت‌های مرتبط

• Input — اگر کاربر باید مقدار عددی دقیق وارد کند، از Input با type="number" استفاده کنید
• RadioGroup — اگر مقادیر گسسته و محدود هستند (مثلاً ۳ سطح کیفیت)، از RadioGroup استفاده کنید