Slider
The Slider component in Velocify UI offers a highly customizable range input element designed to handle dynamic values with precision. It supports a variety of configurations such as min, max, step, and initialValue, providing flexibility in setting the value range and granularity. The component also includes style variants, size options, and the ability to customize the appearance of the slider thumb and step markers. This makes the Slider ideal for scenarios where users need to adjust values within a range, with the added benefit of smooth interaction and adaptability.
Slider Basic Usage
1<Slider />Slider API Reference
Prop | Type | Default |
|---|---|---|
min | number | 0 |
max | number | 100 |
step | number | 1 |
initialValue | number | 0 |
onChange | function | - |
stepMark | boolean | true |
className | string | - |
sliderVariant | string | default |
rounded | string | default |
size | string | default |
thumbVariant | string | default |
thumbSize | string | default |
stepVariant | string | default |
stepSize | string | default |
stepRound | string | default |
* Required | ||
Prop | Types |
|---|---|
size | default small large |
sliderVariant | default secondary warning success info error custom |
rounded | full medium large small |
thumbVariant | default secondary custom |
thumbSize | default small large |
stepVariant | default secondary custom |
stepSize | default small |
stepRound | default small large |
Disabled Slider
1<Slider disabled={true} />Slider - Steps
1<Slider initialValue={50} step={10} />Slider - Sizes
1<Slider size="small" />
2<Slider size="default" />
3<Slider size="large" />Switch - Style Variants
Secondary Variant
1<Slider initialValue={50} step={10} sliderVariant="secondary" />