Multi Slider
Enable users to make multiple selections from a range of values with Rothko UI's Multi Slider component. Customize styles, ranges, and behaviors to create intuitive and interactive sliders, suitable for scenarios that involve multiple value selections.
Usage
import { MultiSlider } 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 multi-slider |
Name kind | Type RothkoKind | Default | Description Sets the font and border color semantically |
Name label | Type string | Default | Description Label for the multi-slider |
Name max | Type number | Default | Description Maximum value of the multi-slider |
Name maxWidth | Type SliderWidth | Default 100% | Description Maximum width of the multi-slider |
Name min | Type number | Default 0 | Description Minimum value of the multi-slider |
Name minWidth | Type SliderWidth | Default | Description Minimum width of the multi-slider |
Name onChange | Type (r: Range) => void | Default | Description Callback function triggered when the range of the multi-slider changes |
Name orMore | Type boolean | Default | Description Specifies if the multi-slider allows values equal to or greater than the current range |
Name postfix | Type string | Default | Description Text to display after the multi-slider range |
Name precision | Type number | Default 0 | Description Number of decimal places to round the multi-slider range values |
Name value | Type Nilable<Range> | Default | Description Current range of the multi-slider |
Name showRange | Type boolean | Default | Description Specifies if the multi-slider range should be displayed |