اسلایدر بازه
range-sliderکامپوننتاسلایدر دو دستگیرهای برای فیلتر کف تا سقف (مثل محدوده قیمت فروشگاه) با پر شدن ترک از راست و اعداد فارسی.
محدوده قیمت۲۰٬۰۰۰٬۰۰۰ تومان۵۰٬۰۰۰٬۰۰۰ تومان
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add range-sliderنصب دستی
محتوای تب «کد» را در
components/ui/range-slider.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { RangeSlider } from "@/components/ui/range-slider"2import { formatToman } from "@/lib/utils"34<RangeSlider5 label="محدوده قیمت"6 min={0}7 max={150_000_000}8 step={1_000_000}9 defaultValue={[20_000_000, 50_000_000]}10 format={formatToman}11 onChange={([lo, hi]) => setRange([lo, hi])}12/>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value / defaultValue | [number, number] | - | زوج کف و سقف. دستگیرهها از هم رد نمیشن. |
| onChange | ([min, max]) => void | - | بعد از هر جابهجایی یا کلید. |
| format | (v: number) => string | ارقام فارسی | قالب هر دو برچسب، مثلاً formatToman. |
| min / max / step | number | - | بازهی مجاز و گام. |
| minThumbLabel / maxThumbLabel | string | «کف» / «سقف» | aria-label هر دستگیره. |
نکتههای راستچین
- پر شدن ترک با همان الگوی اسلایدر تکدستگیره است: linear-gradient(to left …) تا در RTL از راست پر بشه؛ جای دستگیره با inset-inline-start است، نه left/right.
- هر دستگیره role="slider" دارد با aria-valuemin/max/now و aria-valuetext فارسی؛ فلشها در RTL با جهت بومی range هماهنگاند.