Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Field examples · Advanced

Simple Slider Field for React

A volume slider whose description shows the current value.

Framework
UI library

A Slider that says where it is. The FieldTitle names it Volume, and the FieldDescription above the track prints the current percentage as the thumb moves.

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 is the volume number stored?

value is an array whose first number starts at 50. The range is 0 to 100 and step is 1. The bounds are min and max.

How does the percentage stay in sync?

FieldDescription prints the first number in value with a percent sign. font-medium marks that number. Update value from onValueChange.

What names the slider?

FieldTitle is the visible caption, Volume. 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 row.

Why is there one thumb?

value holds one number, so the slider draws one thumb. A second number in that array draws a second thumb.

Which keys move the thumb?

The arrow keys move the focused thumb. Field does not add keys of its own. Home and End jump to the ends of the range.

All 38 field examples