Slider
The Slider is used to allow users to make selections from a range of values.
Imports
- Slider - The wrapper that provides context and functionality for all children.
- SliderThumb - The handle that's used to change the slider value..
- SliderTrack - Slider track element.
Usage
Basic usage.
Slider sizes
Slider comes with 3 sizes sm md lg
Reversed Slider
By setting the reversed prop to true, the slider value is reversed.
Thumb content
To change the contents inside of the thumb we can pass thumbContent prop.
thumbIcon also accepts a function which can be used to get the value of the
slider, it returns an array which can contain multiple values if slider has
multiple thumbs.
Multi Slider & Range Slider
If slider is provided with more than one value, it will be rendered as a range or multi slider.
Range slider
Multi slider
Changing the slider orientation
Slider steps
Customizing Slider
To customize the appearance of the Radio component we can simply pass down
children components (SliderThumb, SliderTrack) for more control.
Note that we can also use the render prop pattern to get internal state of the slider.
Integrations
React Hook Form
This example shows how to integrate renderlesskit Input with react-hook-form