Slider — لغزنده

لغزنده برای انتخاب یک عدد در یک بازه است که نسبت به دقت دقیق اهمیت کمتری دارد: بلندی صدا، سهم سرمایه‌گذاری، بازهٔ قیمت. اگر دقت عدد مهم است، از Input با یا CurrencyInput استفاده کنید.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Slider } from '@tokapps/tuk';

نمونهٔ زنده

بلندی صدا۴۰

سهم سرمایه‌گذاری۳۰٪

بازهٔ قیمت۲۰–۸۰

مبلغ‎ریال ۵۰۰٬۰۰۰

تراکم۲

از کم تا زیاد

غیرفعال۳۰

کد قابل کپی

یک مقدار

TSX

import { Slider } from '@tokapps/tuk';<Slider label="بلندی صدا" value={volume} onChange={setVolume} />

بازه (دو دستگیره)

TSX

<Slider  label="بازهٔ قیمت"  value={range}  onChange={setRange}  minValue={0}  maxValue={100}  thumbLabels={['از', 'تا']}/>

درصد با گام ۵ درصد

TSX

<Slider  label="سهم سرمایه‌گذاری"  defaultValue={0.3}  minValue={0}  maxValue={1}  step={0.05}  formatOptions={{ style: 'percent' }}/>

مبلغ ریالی

TSX

<Slider  label="مبلغ"  defaultValue={500000}  minValue={100000}  maxValue={1000000}  step={50000}  formatOptions={{ style: 'currency', currency: 'IRR', maximumFractionDigits: 0 }}/>

همهٔ پیکربندی‌ها

پراپ	نوع	پیش‌فرض	توضیح
		—	برچسب؛ همراه مقدار فعلی نمایش داده می‌شود.
		—	توضیح زیر لغزنده.
	·		اندازهٔ دستگیره و ریل.
			نمایش مقدار فعلی کنار برچسب.
		—	نام دسترسی هر دستگیره؛ برای بازه .
			زبان و ارقام. جهت لغزنده از می‌آید، نه از .
/		—	یک عدد برای لغزنده تکی، آرایهٔ دو عدد برای بازه.
/		/	کرانه‌ها (پیش‌فرض React Aria).
			گام تغییر.
		—	قالب نمایش: ، با و .
		—	با هر حرکت دستگیره.
		—	وقتی دستگیره رها می‌شود؛ برای ذخیرهٔ سرور بهتر از است.
			غیرفعال.
	رویداد صوتی ·		صدا فقط هنگام رها کردن دستگیره؛ نه با هر حرکت.
		—	مقصد اختصاصی صدا.
	·		نمایش در چاپ.
		—	کلاس روی ریشه.

حالت‌ها

حالت	نمایش
پیش‌فرض / hover / focus	دستگیره با حلقهٔ فوکوس مرئی و پرشدن ریل تا مقدار
بازه	دو دستگیره و پرشدن میان آن‌ها
	کدری کم، بدون پاسخ به کشیدن و کیبورد

RTL و کیبورد

در RTL مقدار کم سمت راست است؛ جهت از تعیین می‌شود (پیش‌فرض ).
فلش‌ها گام را جابه‌جا می‌کنند؛ / گام بزرگ‌تر؛ / کرانه‌ها.
هر دستگیره نقش دارد؛ نام آن از یا و مقدار با خوانده می‌شود.

صدا، حرکت، چاپ

صدا: پیش‌فرض و فقط هنگام رها کردن دستگیره؛ کشیدن پیوسته صدا ندارد. معادل بصری: مقدار جدید نمایش داده می‌شود.
حرکت: جابه‌جایی دستگیره با ؛ در کاهش حرکت بی‌انیمیشن.
چاپ: پیش‌فرض؛ مقدار عددی چاپ می‌شود.

توکن‌ها

کامپوننتی: (ارتفاع، پس‌زمینه، حاشیه)، ، (اندازه با ، پس‌زمینه، حاشیه، سایه، حاشیهٔ hover)، ، ، ، .
تعریف در ؛ فهرست کامل در .

نکات

لغزنده ندارد؛ اگر مقدارش باید در فرم ارسال شود، مقدار را از در یک بگذارید.
برای عدد دقیق یا مبلغ پولی، لغزنده را جایگزین ورودی عددی نکنید.
برای بازهٔ تاریخ از DatePicker استفاده کنید.