Yami UI

A range slider with two handles for selecting a min and max value.

Installation

Add the range slider component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/range-slider.json

Usage

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

<RangeSlider
  defaultValue={[20, 75]}
  min={0}
  max={100}
  onChange={([min, max]) => console.log(min, max)}
/>

Examples

Default

Code

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

<RangeSlider defaultValue={[20, 75]} min={0} max={100} />

With step

Code

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

<RangeSlider defaultValue={[200, 700]} min={0} max={1000} step={50} />

Disabled

Code

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

<RangeSlider defaultValue={[30, 70]} disabled />