Skip to content

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

Free

Slider with Min/Max Labels for React

A Size slider with the label above the track, starting at 50, and with 0 and 100 written under the ends.

Size sits above the track. Small numbers, 0 and 100, sit under the two ends. The thumb starts in the middle.

Use it when the scale is not obvious from the label alone. A Number Input is clearer when people type a size. In React, Base UI does not print those end numbers.

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>Size</Label>
  <Slider aria-label="Size" defaultValue={[50]} max={100} min={0} />
  <div className="flex items-center justify-between text-muted-foreground text-xs">
    <span>0</span>
    <span>100</span>
  </div>
</div>

FAQ

How are the end labels placed?

A flex items-center justify-between row under the slider, with 0 and 100 in text-xs muted text. They are plain text, so they don't change with min and max.

What range does it cover?

0 to 100. Keep the labels in step with the slider's range when you change it. min and max set the ends.

Where does it start?

At 50, from defaultValue. The slider keeps its own value.

How is the slider named?

The Size text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets. On Base UI, aria-label is one string on the slider.

Can I move it from the keyboard?

Yes. The thumb takes focus with Tab. The arrow keys move it by one step, Page Up and Page Down by a larger step, and Home and End jump to the ends.

Do the labels line up with the ends?

Yes. The labels row is in the same w-full max-w-md column as the slider, so justify-between puts 0 under the start and 100 under the end.

API Reference

Label

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

Slider

Sets aria-label="Size", defaultValue={[50]}, max={100} and min={0}. The rest is on the Slider page.

All 29 slider examples