Skip to content

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

Free

Percentage Range Slider for React

A two-thumb percentage slider from 10% to 90% that steps by 5, with 0% and 100% under the track ends.

Percentage Range is on the left and 10% - 90% is on the right. The thumbs step by 5, and 0% and 100% sit under the ends.

Use it for a band of a total, such as a threshold. Named choices belong in a Radio Group. In React, Base UI snaps each thumb to that step.

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

FAQ

How does the readout follow the thumb?

The value lives in state, starting at [10, 90], and goes back to the slider as value. The text beside the label prints both values with % signs. onValueChange receives the new value, and the handler stores it as an array.

How does it step?

step is 5, so both thumbs land on multiples of 5.

What range does it cover?

0 to 100, so the values read as percentages. min and max set the ends.

What are the labels under the track?

0% and 100% in a justify-between row, plain muted text that marks the ends.

How are the thumbs named?

Percentage Range is a visible Label. On Base UI, aria-label names the slider Percentage 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.

API Reference

Label

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

Slider

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

All 29 slider examples