قرصِ عددی که با کشیدنِ افقی کم و زیاد می‌شه و می‌شه داخلش عدد تایپ کرد؛ ارقام فارسی نشون داده می‌شن.

وابستگی‌ها

نوع تعامل

روی قرص بکش تا عدد عوض شه؛ بیرون از بازه، قرص کمی کج می‌شه و با رهاکردن برمی‌گرده. `Shift` پرشِ درشت می‌ده و `Alt` تنظیمِ ریز. روی عدد کلیک کن و تایپ کن — ارقامِ فارسی و لاتین هر دو خونده می‌شن. `ArrowUp`/`ArrowDown` یه گام و `PageUp`/`PageDown` ده گام می‌رن و `Home`/`End` به دو سرِ بازه؛ `Escape` وسطِ کشیدن لغو می‌کنه.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

نصب

{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

نمونه

"use client";

import { useState } from "react";
import ScrubField from "@/components/farsify/scrub-field";

export function RadiusField() {
  const [radius, setRadius] = useState(24);

  return (
    <ScrubField
      label="شعاع"
      suffix="px"
      value={radius}
      onChange={setRadius}
      onCommit={(v) => console.log("ثبت شد:", v)}
    />
  );
}

// بدون کنترل — خودش مقدار را نگه می‌دارد
<ScrubField label="حاشیه" defaultValue={16} min={0} max={64} />

// گامِ ریزِ نیم‌واحدی، با قرصِ اختلاف خاموش
<ScrubField
  label="شفافیت"
  suffix="٪"
  defaultValue={1.5}
  min={0}
  max={10}
  step={0.5}
  showDelta={false}
/>

// رنگ برند — لهجه هم تهیِ مقدار است هم قرصِ اختلاف
<ScrubField
  label="ضخامت"
  suffix="px"
  accent="var(--color-brand)"
  chipColor="#18181b"
  size="lg"
/>

نکته‌ها

• `onCommit` رو برای کارهای سنگین بردار و `onChange` رو برای نمایشِ زنده — مرجع هم همین تفکیک رو داره. `onChange` توی هر قابِ کشیدن صدا زده می‌شه.
• ورودی، ارقامِ فارسی و لاتین رو هر دو می‌خونه. صفحه‌کلیدهای فارسی «۲۴» می‌فرستن و `parseFloat`ِ خام اون رو `NaN` می‌خونه؛ این‌جا هر دو یکسان کار می‌کنن.
• اگه `min` و `max` رو روی یه عدد بذاری، بازه صفر می‌شه و کششِ لاستیکی خاموش می‌شه — کامپوننت نمی‌شکنه، فقط بی‌فنر می‌شه.
• برچسب و واحد رابطِ کاربری‌ان، نه داده — روی خودِ قرص دیده می‌شن و توی `aria-valuetext` اعلام می‌شن. پس فارسی بمون.
• مقدار با ارقامِ فارسی **نمایش** داده می‌شه ولی `aria-valuenow` عددِ لاتین می‌مونه — همون چیزی که فناوریِ کمکی می‌خونه.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.