Skip to content

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

Free

Speed Control Slider for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not know those names.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Slider anatomy: root, label, value, track, range, thumb

Usage

<div class="flex w-full max-w-md flex-col gap-2">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <GaugeIcon aria-hidden="true" class="size-4" />
          <Label>Speed</Label>
        </div>
        <span class="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 class="flex items-center justify-between text-muted-foreground text-xs">
        {speedLabels.map(label => <span>{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 details.value, the new 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. Pass getAriaValueText to have the thumb announce the name instead.

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