Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Field examples · Advanced

Range Slider Field for React

A two-thumb price range slider whose description shows the live range.

Framework
UI library

A minimum and a maximum on one track, for price filters and other bounded ranges. The Slider has two thumbs from a two-number value, and the FieldDescription prints both ends as they move, with tabular-nums so the digits don't shift.

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

Why does the price slider use an array?

value starts as 200 and 800. Two numbers draw two thumbs, the low end and the high end of the range.

What are the limits and the step?

The range is 0 to 1000 and step is 10. The bounds are min and max. Each move snaps to that step.

How does the sentence show both prices?

FieldDescription prints both numbers from value, inside Set your budget range. font-medium and tabular-nums on each number keep the digits aligned as they change. Update value from onValueChange.

What names the slider?

FieldTitle is the visible caption, Price Range. aria-label on Slider names the control, because FieldTitle is a visual title.

What is the space above the track?

mt-2 on Slider adds space under the description. max-w-md on Field caps the width.

How do I make this a single price instead?

Pass one number in value. The slider then draws one thumb, and the description can print that number alone.

All 38 field examples