Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Price Range Slider for Ark UI

A Price Range slider on a $0 to $1000 scale, opening at $200 and $800, with both prices under the track.

Price Range labels a track with two thumbs. It opens at $200 and $800, and those prices sit under the track.

Use it in a product filter next to other facets. Add a Number Input at each end if shoppers type the bounds. In React, Ark UI does not format the prices.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Slider anatomy: root, label, value, track, range, thumb

Usage

<div className="flex w-full max-w-md flex-col gap-2">
  <Label>Price Range</Label>
  <Slider
    aria-label={["Minimum price", "Maximum price"]}
    max={1000}
    min={0}
    onValueChange={handleValueChange}
    value={value}
  />
  <div className="flex items-center justify-between text-muted-foreground text-sm tabular-nums">
    <span>${value[0]}</span>
    <span>${value[1]}</span>
  </div>
</div>

FAQ

How does the readout follow the thumb?

The value lives in state, starting at [200, 800], and goes back to the slider as value. The two prices under the track print value[0] and value[1] with a dollar sign. onValueChange receives details.value, the new array.

What range does it cover?

0 to 1000 in steps of 1. min and max set the ends.

How are the thumbs named?

Price Range is a visible Label. On Ark UI, aria-label names each thumb: Minimum price and Maximum price.

How are the prices formatted?

A dollar sign before the raw number. For thousands separators or another currency, format the value with Intl.NumberFormat before you print it.

Can I snap to round prices?

Set step, for example 10 or 50. The demo leaves it at 1.

When should I save the range?

The change callback runs on every step while the thumb moves. Save or fetch from the end-of-change callback, which runs once when dragging stops. On Ark UI it is onValueChangeEnd.

API Reference

Label

No extra props in this demo. The rest is on the Label page.

Slider

Sets aria-label={["Minimum price", "Maximum price"]}, max={1000}, min={0}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.

All 29 slider examples