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
Double Slider
Slider Steps
API Reference
Reference

Default Slider#

Double Slider#

Slider Steps#

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.