Range Slider

New

One or two thumbs with value bubbles that ride along and merge when they meet. Step ticks and a histogram backdrop make it a ready price filter.

motionutils@soultel/use-reduced-motion-safe

Price197 products

Seats$60/mo

Installation

$ pnpm dlx shadcn@latest add @soultel/range-slider

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/range-slider.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/range-slider.tsx.

Usage

example.tsx15 lines

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

export function PriceFilter() {
  return (
    <RangeSlider
      min={0}
      max={500}
      step={10}
      defaultValue={[80, 320]}
      format={(v) => `$${v}`}
      histogram={[2, 5, 9, 14, 18, 22, 19, 15, 11, 8, 6, 4]}
      onValueCommit={([min, max]) => applyFilter({ min, max })}
    />
  )
}

Props

Prop	Type	Default	Description
value / defaultValue	number[]	-	One value for a single thumb, two for a range.
onValueChange / onValueCommit	(value: number[]) => void	-	Every change, or once a drag or key press ends.
min / max / step	number	0 / 100 / 1	Range and increment.
minStepsBetween	number	0	Smallest gap between the thumbs, in steps.
format	(value: number) => string	-	Bubble and screen reader text.
bubbles	"always" \| "active" \| "never"	"always"	When the value bubbles show.
ticks	boolean	false	A mark per step, up to 40 steps.
histogram	number[]	-	Bucket counts drawn behind the track. Buckets inside the range light up.
labels	string[]	-	Accessible names for the thumbs.