Skip to content

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

Free

Vertical Range Slider for React

A vertical Range slider with two thumbs opening at 30 and 70, and those two values stacked under the track.

Range sits above a vertical track with two thumbs. Under it, 70 is written above a hyphen and 30 is written below.

Use it beside a tall chart or preview. A horizontal track is easier on a short page, and typed ends belong in a Number Input. In React, Base UI does not stack those two 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 flex-col items-center gap-4">
  <Label>Range</Label>
  <div className="h-56">
    <Slider
      aria-label="Range"
      onValueChange={handleValueChange}
      orientation="vertical"
      value={value}
    />
  </div>
  <div className="flex flex-col items-center gap-1 text-muted-foreground text-sm tabular-nums">
    <span>{value[1]}</span>
    <span>-</span>
    <span>{value[0]}</span>
  </div>
</div>

FAQ

How is it made vertical?

orientation="vertical", inside a h-56 box that sets its length.

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 reading prints the higher value above the lower one. onValueChange receives the new value, and the handler stores it as an array.

Which thumb is which?

The first value is the lower thumb, near the bottom, and the second the upper one.

How are the thumbs named?

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

What range does it cover?

0 to 100. min and max set the ends.

Which keys move the thumbs?

Up and Right raise the focused thumb, Down and Left lower it, and Home and End jump to the ends.

API Reference

Label

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

Slider

Sets aria-label="Range", onValueChange={handleValueChange}, orientation="vertical" and value={value}. The rest is on the Slider page.

All 29 slider examples