Range Slider

Two-thumb range slider for picking a min and max, with value bubbles on both thumbs while dragging, optional marks, a formatter and an onValueCommitted hook.

src/registry/ui/range-slider.tsx/r/range-slider.json

Drag either thumb

Installation#

bash

npx shadcn@latest add @minidev/range-slider

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/range-slider.json

Usage#

tsx

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

export function Example() {
  return (
    <RangeSlider defaultValue={[20, 80]} aria-label="Price range" />
  )
}

API reference#

RangeSlider props
Prop	Type	Default
`value`	`number[]`	`-`
`defaultValue`	`number[]`	`[25, 75]`
`onValueChange`	`(value: number[]) => void`	`-`
`onValueCommitted`	`(value: number[]) => void`	`-`
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`disabled`	`boolean`	`-`
`className`	`string`	`-`
`aria-label`	`string`	`-`