Skip to content

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

Free

Speed Control Slider for React

A Speed slider on four named steps, Slow through Very Fast, starting at Normal, with the names under the track.

A gauge icon, Speed, and the word Normal share the top row. Slow, Normal, Fast, and Very Fast sit under the track.

Use it when the setting has names rather than a unit, like playback speed. Four options in a Radio Group work if dragging feels odd. In React, Base UI does not know those names.

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">
    <div className="flex items-center gap-2">
      <GaugeIcon aria-hidden="true" className="size-4" />
      <Label>Speed</Label>
    </div>
    <span className="text-muted-foreground text-sm">
      {speedLabels[value[0]]}
    </span>
  </div>
  <Slider
    aria-label="Speed"
    max={3}
    min={0}
    onValueChange={handleValueChange}
    step={1}
    value={value}
  />
  <div className="flex items-center justify-between text-muted-foreground text-xs">
    {speedLabels.map((label) => (
      <span key={label}>{label}</span>
    ))}
  </div>
</div>

FAQ

How do the steps get names?

A speedLabels array holds the four names. The text beside the label prints the name at the current value, and the row under the track lists all four.

How does the readout follow the thumb?

The value lives in state, starting at 1 (Normal), and goes back to the slider as value. The name beside the label looks it up in speedLabels. onValueChange receives the new value, and the handler stores it as an array.

What range does it cover?

0 to 3 in steps of 1, one step per name. min and max set the ends.

What does a screen reader announce?

The number, 0 to 3, because the slider only knows numbers. The name is in the visible text beside the label.

Is the gauge icon announced?

No. It has aria-hidden="true".

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="Speed", max={3}, min={0}, onValueChange={handleValueChange}, step={1} and value={value}. The rest is on the Slider page.

All 29 slider examples