Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Range

Price Range Slider for React

A two-thumb price slider from $0 to $1000 with the selected prices shown under the track.

Framework
UI library

A price filter needs both a floor and a ceiling. Two thumbs run from $0 to $1000, and the two prices under the track update as they move. Use it in a product filter beside other facets.

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

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 the new value, and the handler stores it as an 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 Base UI, aria-label names the slider Price range.

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 Base UI it is onValueCommitted.

All 29 slider examples