Slider - Keep React
Table of Contents#
- Default Slider
- Slider With Dots
- Slider With Marks
- Slider With Tooltip Position
- API Reference
- Reference
Default Slider#
It's designed for selecting a range of values from 100 to 1000. The initial range is set at 100 to 300. The slider shows value tooltips at the top. Users can easily drag the range selection thanks to the draggableTrack={true} features.
Slider With Dots#
Enabling the dots feature in the slider is done using the dots= prop. To further customize the dots, you can include an additional prop called step. This step prop takes a numerical value, and it determines the spacing between the dots on the slider line.
Slider With Marks#
Enabling the marks feature in the slider allows you to display specific marked points along the slider line.
Slider With Tooltip Position#
Control the position of the tooltips in the slider by using the tooltip prop. Setting tooltip="top" will display the tooltips above the slider thumb, while tooltip="bottom" will display them below the slider thumb. If tooltip position is tooltip="none" then tooltip will be hidden.
API Reference#
Explore the available props for the slider component
| Property | Description | Type | Default |
|---|---|---|---|
| min | Minimum value of the slider. | number | 0 |
| max | Maximum value of the slider. | number | 100 |
| step | Step size for each increment on the slider. Can be null. | number | number |
| range | Determines whether the slider displays a range color. | boolean | false |
| dots | Determines whether dots are displayed on the slider. | boolean | false |
| marks | Defines points on the slider with custom labels. | Object | Object |
| reverse | Determines if the slider values are shown in reverse. | boolean | false |
| disabled | Determines if the slider is disabled. | boolean | false |
| defaultValue | Initial default value or values for the slider. | number number[] | 0 |
| onChange | Callback function when the slider value changes. | function | (value) => void |
| tooltip | Specifies the position of the tooltip or hides it. | top bottom none | top |
Reference#
We've built a slider component using two third-party packages: rc-slider and rc-tooltip. These packages are handy for creating sliders with tooltips. If you'd like to explore these packages further and understand their features, please check out the documentation for Rc-slider and Rc-tooltip.