Range Slider

Pro

A one or two thumb slider with a value bubble that pops while you drag and full keyboard support.

Filters

Find an asset pack

Price

Minimum rating

Customize

Thumbs

Step5

Color#ff784f

Installation

Range Slider is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy range-slider.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { RangeSlider } from "@/components/ui/range-slider";

<RangeSlider
  label="Price"
  min={0}
  max={100}
  defaultValue={[20, 60]}
  formatValue={(v) => `$${v}`}
  onChangeEnd={([low, high]) => filter({ low, high })}
/>

Props

15 properties

Property	Type	Default	Description
min	number	0	Lowest value.
max	number	100	Highest value.
step	number	1	Values snap to multiples of this.
value	number \| [number, number]	—	Controlled value. A pair renders two thumbs.
defaultValue	number \| [number, number]	min	Starting value when uncontrolled. A pair renders two thumbs.
onChange	(value) => void	—	Called while dragging or pressing keys, with the same shape as value.
onChangeEnd	(value) => void	—	Called when a drag or key press ends.
minDistance	number	0	Smallest gap between the two thumbs.
color	string	"#ff784f"	Track fill, thumb ring and bubble color.
formatValue	(value: number) => string	—	Formats the bubble, the header and the screen reader text.
label	string	—	Visible label with the current value. Also names the thumbs.
disabled	boolean	false	Blocks interaction.
name	string	—	Form field name. Two thumbs submit two entries under the same name.
id	string	—	Base id for the label and thumbs.
className	string	—	Extra classes for the wrapper.

Dependencies: motion