Color Sliderv1.0.0
اسلایدرِ تک‌دستگیره‌ای که یک کانال از یک رنگ (فام، اشباع، درخشندگی، روشنایی، هر کدام از قرمز/سبز/آبی یا شفافیت) را تغییر می‌دهد؛ پس‌زمینهٔ نوار همیشه طیف واقعیِ همان کانال روی رنگ فعلی است، نه یک نوار خاکستریِ ساده.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/color-slider.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/color-slider.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/color-slider.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/color-slider.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { ColorSlider } from "@/components/ui/color-slider"
<ColorSlider channel="hue" defaultValue="#7c3aed" onChangeEnd={(color) => console.log(color.toString("hex"))} />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
بر خلاف Slider عمومی (که چند مقدار عددی می‌گیرد)، ColorSlider همیشه یک رنگِ کامل را به‌عنوان value/defaultValue می‌گیرد و فقط کانال مشخص‌شده با channel را تغییر می‌دهد؛ بقیهٔ کانال‌های رنگ دست‌نخورده می‌مانند.
onChange حین کشیدن (پیوسته) و onChangeEnd فقط هنگام رهاکردن دستگیره یا گام کیبورد صدا زده می‌شوند؛ هر دو یک Color کامل می‌دهند، نه فقط عدد کانال.
برای ترکیب چند اسلایدر روی یک رنگ مشترک (مثل hue+alpha)، همه را با یک value کنترل‌شدهٔ یکسان کنترل کنید؛ دقیقاً همان چیزی که ColorPicker داخلی‌اش انجام می‌دهد.
بازهٔ هر کانال با getChannelValue/getChannelRange در lib/color.ts مشخص می‌شود: فام ۰ تا ۳۶۰، اشباع/درخشندگی/روشنایی/شفافیت ۰ تا ۱۰۰ (درصد)، قرمز/سبز/آبی ۰ تا ۲۵۵.
دسترس‌پذیری
- دستگیره role="slider" با aria-valuemin/max/now دارد؛ همیشه یک aria-label توصیفی بدهید (پیش‌فرض نامِ فارسیِ خودِ کانال است، ولی در فرم واقعی بهتر است بگویید این اسلایدر مال کدام رنگ/کدام فیلد است).
- کیبورد کامل پشتیبانی می‌شود: پیکان‌ها یک گام، Page Up/Down ده گام، Home/End به کمینه/بیشینهٔ کانال: و پیکان چپ/راست در RTL خودکار برعکس می‌شوند.
- برای کانال آلفا، چون رنگ به‌تنهایی شفافیت را منتقل نمی‌کند، حتماً showValueLabel یا یک برچسب عددی کنار اسلایدر بگذارید تا کاربرانی که رنگ‌ها را به‌سختی تشخیص می‌دهند هم مقدار را ببینند.
مرجع API
ColorSlider
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| channel | "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha" | — | کانالی که این اسلایدر تغییر می‌دهد. |
| value | string | — | رنگِ کامل، کنترل‌شده (نه فقط عدد کانال). |
| defaultValue | string | "#7c3aed" | رنگِ کامل اولیه در حالت کنترل‌نشده. |
| onChange | (color: Color) => void | — | حین کشیدن دستگیره، با هر حرکت صدا زده می‌شود. |
| onChangeEnd | (color: Color) => void | — | فقط هنگام رهاکردن دستگیره یا گام کیبورد. |
| orientation | "horizontal" | "vertical" | "horizontal" | جهت اسلایدر. |
| showValueLabel | boolean | false | نمایش حباب مقدار عددی حین کشیدن یا فوکوس. |
| disabled | boolean | false | غیرفعال‌کردن تعامل. |
| aria-label | string | — | پیش‌فرض نامِ فارسیِ خودِ کانال (مثل «فام»)؛ برای زمینهٔ خاص‌تر بازنویسی کنید. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Channels
هر کانال پس‌زمینهٔ گرادیانِ خودش را دارد: فام طیفِ کامل، بقیه طیفِ همان کانال روی رنگ فعلی.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
RGB Channels
کانال‌های قرمز، سبز و آبی: بازهٔ هرکدام ۰ تا ۲۵۵.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Alpha
زیرِ گرادیانِ شفافیت، پس‌زمینهٔ شطرنجی دیده می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Value Label
showValueLabel حین کشیدن یا فوکوس کیبورد یک حباب مقدار نشان می‌دهد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Vertical
با orientation="vertical" برای چیدمان‌های عمودی (مثل کنار مربع رنگ).
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
ترکیبِ چند کانال روی یک رنگ
چند ColorSlider که همه یک value کنترل‌شدهٔ مشترک دارند: همان الگویی که ColorPicker داخلی‌اش استفاده می‌کند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Disabled
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Channels | هر کانال پس‌زمینهٔ گرادیانِ خودش را دارد: فام طیفِ کامل، بقیه طیفِ همان کانال روی رنگ فعلی. |
| RGB Channels | کانال‌های قرمز، سبز و آبی: بازهٔ هرکدام ۰ تا ۲۵۵. |
| Alpha | زیرِ گرادیانِ شفافیت، پس‌زمینهٔ شطرنجی دیده می‌شود. |
| Value Label | showValueLabel حین کشیدن یا فوکوس کیبورد یک حباب مقدار نشان می‌دهد. |
| Vertical | با orientation="vertical" برای چیدمان‌های عمودی (مثل کنار مربع رنگ). |
| ترکیبِ چند کانال روی یک رنگ | چند ColorSlider که همه یک value کنترل‌شدهٔ مشترک دارند: همان الگویی که ColorPicker داخلی‌اش استفاده می‌کند. |
| Disabled | کانالی که تا زمان فعال‌سازی یک تنظیم دیگر قابل تغییر نیست |
دستورالعمل استفاده
یک رنگ پایه بدهید، نه رنگ پیش‌فرض تصادفی
انجام بده
defaultValue/value را از رنگ واقعیِ در حال ویرایش (مثلاً رنگ برند فعلی) بگیرید.
انجام نده
رها کردن اسلایدر با رنگ پیش‌فرض کامپوننت (بنفش) وقتی رنگ واقعیِ فرم چیز دیگری است، اسلایدر و پیش‌نمایش را ناهماهنگ نشان می‌دهد.
برای شفافیت، مقدار را نشان بدهید
انجام بده
showValueLabel روی کانال alpha روشن باشد.
انجام نده
بدون برچسب عددی، فرق ۹۰٪ و ۱۰۰٪ شفافیت را با چشم به‌سختی می‌شود تشخیص داد.