Skip to content

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

Free

Range with Value Display Slider for React

A Range slider with two thumbs opening at 30 and 70, and that span written beside the label.

Range is on the left and 30 - 70 is on the right, above one track with two thumbs. Nothing is written under the track.

Use it where height is tight and the span should still be readable. Put the same numbers in a Field if people type them. In React, Base UI does not render that readout.

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">
  <div className="flex items-center justify-between">
    <Label>Range</Label>
    <span className="text-muted-foreground text-sm tabular-nums">
      {value[0]} - {value[1]}
    </span>
  </div>
  <Slider
    aria-label="Range"
    max={100}
    min={0}
    onValueChange={handleValueChange}
    value={value}
  />
</div>

FAQ

How does the readout follow the thumb?

The value lives in state, starting at [30, 70], and goes back to the slider as value. The text beside the label prints both values with a dash between them. onValueChange receives the new value, and the handler stores it as an array.

How is the row laid out?

flex items-center justify-between: the label at the start, the values at the end in muted tabular-nums text.

What range does it cover?

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

How are the thumbs named?

Range is a visible Label. On Base UI, aria-label names the slider Range.

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.

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.

API Reference

Label

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

Slider

Sets aria-label="Range", max={100}, min={0}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.

All 29 slider examples