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.
Import
- Global
- Single
import { Slider, 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 (v: number) => void | Default | Description Callback function triggered when the value of the slider changes |
Name style | Type CSSProperties | Default | Description The inline style for the slider |
Name value | Type number | undefined | null | Default | Description Current value of the slider |