Slider - Keep React

The slider component in the Keep React allows users to select a value within a specified range. With customizable options for the control handle type, scale display, label, and tooltip, you can create versatile sliders that fit your design needs.

Table of Contents#

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

minMinimum value of the slider.number0
maxMaximum value of the slider.number100
stepStep size for each increment on the slider. Can be null.numbernumber
rangeDetermines whether the slider displays a range color.booleanfalse
dotsDetermines whether dots are displayed on the slider.booleanfalse
marksDefines points on the slider with custom labels.ObjectObject
reverseDetermines if the slider values are shown in reverse.booleanfalse
disabledDetermines if the slider is disabled.booleanfalse
defaultValueInitial default value or values for the slider.
onChangeCallback function when the slider value changes.function(value) => void
tooltipSpecifies the position of the tooltip or hides it.


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.