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.
Import
- Global
- Single
import { MultiSlider, SliderHandle } from '@rothko-ui/react';
Usage
- Example
- Code
Disabled
- Example
- Code
With Kind
- Example
- Code
primary
secondary
success
danger
warning
info
Props
| Name | Type | Default | Description |
|---|---|---|---|
Name children | Type ReactElement<SliderHandleProps>; | Default | Description Slider handle |
Name className | Type string | Default | Description CSS class name(s) |
Name disabled | Type boolean | Default | Description Specifies whether the slider is disabled |
Name kind | Type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | Default | Description The semantic style of the slider |
Name max | Type number | Default | Description Maximum value of the slider |
Name min | Type number | Default 0 | Description Minimum value of the slider |
Name onChange | Type (r: Range) => void | Default | Description Callback function triggered when the range of the multi-slider changes |
Name style | Type CSSProperties | Default | Description The inline style for the slider |
Name value | Type [number, number] | undefined | null | Default | Description Current value of the slider |