Slider

A value, or a range between two values, picked by dragging a thumb along a track.

ui.slidercomponents/ui/slider.tsx

Use case

For the AI

Use it where the rough position matters more than the exact figure: a price range filter over a product list, a discount between 0 and 30 percent, a search radius around a client's address. Pass one number for one thumb, an array of two for a range, and show the figure with `SliderValue` when the person needs to read it.

Use it when

Filtering by a range (a price, a quantity)
A rough value where dragging is quicker than typing
The value has a known minimum and maximum
A range between two values: `defaultValue={[20, 70]}`

Use something else when

An exact figure (a price or a quantity on an invoice line): Number field
A few named steps (low, medium, high): Segmented control
Showing how far along something is, not setting it: Progress

Examples

One value

Price20 to 70

A range, with its value

Code

Import

import { Slider, SliderValue } from "@/components/ui/slider"

Usage

<Slider
  defaultValue={[200, 1500]}
  min={0}
  max={5000}
  step={50}
  format={{ style: "currency", currency: "CAD", maximumFractionDigits: 0 }}
  onValueCommitted={(value) => applyPriceFilter(value)}
  aria-label="Price range"
>
  <div className="flex w-full justify-between text-[12.5px] text-ink-4">
    <span>Price</span>
    <SliderValue className="tabular-nums text-foreground" />
  </div>
</Slider>

Rules

Set `min`, `max` and `step` to the real bounds; without them it runs from 0 to 100.
Name it with `aria-label`, and show the figure with `SliderValue` (tabular numbers) when it matters; `format` takes `Intl.NumberFormatOptions` for money or percent.
A range reads in words, "$200 to $1,500": `SliderValue` joins the two ends with its `separator` (" to " by default); a French tool passes `separator=" à "`.
When the change reaches the server, save in `onValueCommitted` (the thumb let go), not on every `onValueChange`.