Slider
Allow users to select a value from a range with Rothko UI's Slider component. Customize styles, ranges, and behaviors to create interactive and visually appealing sliders, perfect for adjusting settings, filters, and other numerical input scenarios.
Usage
import { Slider } from '@rothko-ui/ui';
- Example
- Code
Disabled
- Example
- Code
With Kind
- Example
- Code
danger
info
primary
secondary
success
warning
Props
Name | Type | Default | Description |
---|---|---|---|
Name className | Type string | Default | Description Class name for custom styling |
Name disabled | Type boolean | Default | Description Disables the slider |
Name kind | Type RothkoKind | Default | Description Sets the font and border color semantically |
Name label | Type string | Default | Description Label for the slider |
Name max | Type number | Default | Description Maximum value of the slider |
Name maxWidth | Type SliderWidth | Default 100% | Description Maximum width of the slider |
Name min | Type number | Default 0 | Description Minimum value of the slider |
Name minWidth | Type SliderWidth | Default | Description Minimum width of the slider |
Name onChange | Type (v: number) => void | Default | Description Callback function triggered when the value of the slider changes |
Name orMore | Type boolean | Default | Description Specifies if the slider allows values equal to or greater than the current value |
Name postfix | Type string | Default | Description Text to display after the slider value |
Name precision | Type number | Default 0 | Description Number of decimal places to round the slider value |
Name value | Type Nilable<number> | Default | Description Current value of the slider |
Name showValue | Type boolean | Default | Description Specifies if the slider value should be displayed |