اسلایدر برای انتخاب یک مقدار در محدوده مشخص استفاده میشود.
marks داشته باشد.step به شما امکان میدهد مقدار افزایشی هنگام کشیدن اسلایدر را کنترل کنید، تعیین میکند که اسلایدر چگونه در مقادیر مختلف یکسان حرکت کند و ویژگی stepOnMarks به شما امکان میدهد اسلایدر را در مقادیر مختلف ناهمسان حرکت دهید.min و max به شما امکان میدهند مقادیر حداقل و حداکثر سفارشی برای اسلایدر تنظیم کنید.classNames سفارشی کنیم و کلاسهایی را به بخشهای مختلف اسلایدر اعمال کنیم. <Slider />| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| alwaysShowTooltip | آیا راهنما همیشه نمایش داده شود | boolean | - |
| classNames | نام کلاس برای هر بخش از اسلایدر | classNames?: { thumb?: string; bar?: string; mark?: string | ((isFilled: boolean) => string); track?: string } | - |
| defaultValue | مقدار پیشفرض اسلایدر (اگر کنترل شده است به جای آن از value استفاده کنید) | number | - |
| disabled | آیا اسلایدر غیرفعال شود | boolean | - |
| inputProps | ویژگیهای المنت input پشت اسلایدر | React.ComponentPropsWithoutRef<'input'> | - |
| marks | دادههای نشانگرها که در زیر نوار نمایش داده میشوند | { value: number; label?: ReactNode | string }[] | - |
| max | حداکثر مقدار اسلایدر | number | 100 |
| min | حداقل مقدار اسلایدر | number | 0 |
| name | نام المنت input پشت اسلایدر | string | - |
| onChange | فراخوانی هنگامی که مقدار اسلایدر تغییر میکند | (value: number) => void | - |
| onDraggingStop | فراخوانی هنگامی که کشیدن متوقف میشود | (value: number) => void | - |
| precision | دقت مقدار اسلایدر | number | - |
| showTooltipOnHover | آیا هنگام هاور راهنما نمایش داده شود | boolean | false |
| step | مقدار افزایشی هنگام کشیدن اسلایدر | number | 1 |
| stepOnMarks | آیا اسلایدر در مقادیر گام ناهمسان حرکت کند | boolean | false |
| thumbAriaLabel | برچسب Aria برای دسته اسلایدر | string | - |
| tooltip | مقدار راهنمای سفارشی اسلایدر | ReactNode | ((value: number) => ReactNode) | - |
| value | مقدار اسلایدر | number | - |
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| alwaysShowTooltip | آیا راهنما همیشه نمایش داده شود | boolean | - |
| defaultValue | مقدار پیشفرض اسلایدر محدوده (اگر کنترل شده است به جای آن از value استفاده کنید) | number | - |
| disabled | آیا اسلایدر محدوده غیرفعال شود | boolean | - |
| inputProps | ویژگیهای المنت input پشت اسلایدر | React.ComponentPropsWithoutRef<'input'> | - |
| marks | دادههای نشانگرها که در زیر نوار نمایش داده میشوند | { value: number; label?: ReactNode | string }[] | - |
| max | حداکثر مقدار اسلایدر محدوده | number | 100 |
| maxRange | حداکثر فاصله بازه اسلایدر محدوده | number | - |
| min | حداقل مقدار اسلایدر محدوده | number | 0 |
| minRange | حداقل فاصله بازه اسلایدر محدوده | number | 0 |
| name | نام المنت input پشت اسلایدر | string | - |
| precision | دقت مقدار اسلایدر محدوده | number | - |
| onChange | فراخوانی هنگامی که مقدار اسلایدر محدوده تغییر میکند | (values: [number, number]) => void | - |
| onDraggingStop | فراخوانی هنگامی که کشیدن متوقف میشود | (values: [number, number]) => void | - |
| showTooltipOnHover | آیا هنگام هاور راهنما نمایش داده شود | boolean | false |
| step | مقدار افزایشی هنگام کشیدن اسلایدر | number | 1 |
| stepOnMarks | آیا اسلایدر در مقادیر گام ناهمسان حرکت کند | boolean | false |
| thumbAriaLabelStart | برچسب Aria برای دسته شروع اسلایدر | string | - |
| thumbAriaLabelEnd | برچسب Aria برای دسته پایان اسلایدر | string | - |
| tooltip | مقدار راهنمای سفارشی اسلایدر | ReactNode | ((value: [number, number]) => ReactNode) | - |
| value | مقدار اسلایدر محدوده | [number, number] | - |