components
Slider
v.1.0.0 | SaturnUsage
import { PillSelector } from '@kubit-ui-web/react-components'
1234
<Slider
label={{ content: 'Mock label' }}
variant='PRIMARY'
/>Props
Let's delve into the versatility of the slider component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Slider variant |
| type | SliderType | DISCRETE | It indicates if slider is discrete or continuous |
| range | boolean | false | It indicates if is a range slider |
| id | string | - | Slider´s id |
| min | number | 0 | Slider´s min value |
| max | number | 100 | Slider´s max value |
| step | number | 1 | Slider´s step value |
| defaultValue | number or array | - | Slider´s default value |
| value | number or array | - | Slider´s value |
| initialStepOffset | number | - | Slider´s initial step offset |
| onChange | (value: number or number<array>) => void | - | Function to call when the inner Slider´s value change |
| onDragStart | () => void | - | Function excecuted when dragging the thumb |
| onDragEnd | () => void | - | Function excecuted when drop the thumb |
| disabled | boolean | false | It indicates if slider is disable |