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, you can create versatile sliders that fit your design needs.

Table of Contents#

Default Slider
Double Slider
API Reference
Reference

Default Slider#

Double Slider#

API Reference#

Explore the available props for the slider component. For more information API Reference

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
inverted	Determines if the slider values are shown in reverse.	boolean	false
defaultValue	Initial default value or values for the slider.	number number[]	0
onValueChange	Callback function when the slider value changes.	function	(value) => void

Reference#

We've built a slider component using '@radix-ui/react-slider package. This package is handy for creating slider component. If you'd like to explore this package further and understand their features, please check out the documentation for @radix-ui/react-slider.

Edit this page Select