Skip to content

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

Free

Vertical with Indicators Slider for Ark UI

A vertical Intensity slider at 50 that snaps by 25, with Max, High, Med, Low, and Min beside the track.

Intensity and 50 sit to the left of a vertical track. Max, High, Med, Low, and Min run down the other side.

Use it for a quality setting with a few named stops. A Toggle Group is clearer if only those five values exist. In React, Ark UI snaps the thumb and ignores the 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 items-center gap-4">
  <div className="flex flex-col gap-2">
    <Label>Intensity</Label>
    <span className="text-muted-foreground text-sm tabular-nums">
      {value[0]}%
    </span>
  </div>
  <div className="h-52">
    <Slider
      aria-label={["Intensity"]}
      onValueChange={handleValueChange}
      orientation="vertical"
      step={25}
      value={value}
    />
  </div>
  <div className="flex h-52 flex-col items-start justify-between text-muted-foreground text-xs">
    {levels.map((level) => (
      <span key={level}>{level}</span>
    ))}
  </div>
</div>

FAQ

How does it snap?

step is 25, so the thumb lands on 0, 25, 50, 75 or 100.

How are the level names placed?

A levels array mapped into a h-52 column with justify-between, the same height as the slider, so Max sits at the top and Min at the bottom.

How does the readout follow the thumb?

The value lives in state, starting at 50, and goes back to the slider as value. The percentage under the label prints it. onValueChange receives details.value, the new array.

How is it made vertical?

orientation="vertical", inside a h-52 box.

How is the slider named?

The Intensity text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets. On Ark UI, aria-label is a list with one name per thumb.

What does a screen reader announce?

The number, such as 50. The level names are visual only.

API Reference

Label

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

Slider

Sets aria-label={["Intensity"]}, onValueChange={handleValueChange}, orientation="vertical", step={25} and value={value}. The rest is on the Slider page.

All 29 slider examples