اسلایدر (Slider)

معرفی

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

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

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

استفاده

import { Slider } from '@partodata/ui'

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

زمین بازی

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

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

پیش‌فرض

عمودی

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

غیرفعال

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

محدوده (Range)

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

اندازه‌ها

اندازهٔ نوار و دستگیره با هم تغییر می‌کنند. پیش‌فرض پروژه sm است؛ برای ردیف‌های فشرده (مثلاً یک نوار فیلتر) از xs و برای فرم‌های ساخته‌شده روی ورودی‌های xl از xl استفاده کنید.

<Slider defaultValue={[40]} size="xs" />
<Slider defaultValue={[40]} size="sm" />
<Slider defaultValue={[40]} size="md" />
<Slider defaultValue={[40]} size="lg" />
<Slider defaultValue={[40]} size="xl" />

نمایش مقدار

برای اسلایدری که یک آستانه (threshold) را تنظیم می‌کند، کاربر باید مقدار انتخابی را ببیند. showValue="inline" مقدار را همیشه بالای دستگیره نشان می‌دهد؛ showValue="tooltip" فقط هنگام کشیدن یا فوکوس نمایش می‌دهد. برای قالب‌بندی سفارشی (مثلاً افزودن واحد) از formatValue استفاده کنید.

<Slider defaultValue={[42]} showValue="inline" />
<Slider defaultValue={[42]} showValue="tooltip" />
<Slider defaultValue={[42]} showValue="inline" formatValue={(v) => `${v}%`} />

نشانه‌های مرجع (Marks)

برای نشان‌دادن نقاط مهم روی نوار (مثلاً حداقل توصیه‌شده) از marks استفاده کنید.

<Slider
  defaultValue={[40]}
  marks={[
    { value: 0, label: 'کم' },
    { value: 50, label: 'متوسط' },
    { value: 100, label: 'زیاد' },
  ]}
/>

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

Props

نکات

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

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

• نقش slider از Radix UI به‌صورت خودکار اعمال می‌شود
• مقادیر aria-valuemin، aria-valuemax و aria-valuenow توسط Radix مدیریت می‌شوند
• با aria-label یا aria-labelledby برچسب‌گذاری کنید
• دستگیره بسته به size بین 12 تا 24 پیکسل دیده می‌شود، اما ناحیهٔ لمسی آن در همهٔ اندازه‌ها دستکم 44 پیکسل است (یک ::before شفاف با inset منطقی)، بنابراین روی صفحه‌های لمسی هدفِ استاندارد را برآورده می‌کند بدون آنکه ظاهر تغییر کند

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

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