Skip to content

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

Free

Slider with Step Indicators for Ark UI

A Level slider at 50 that snaps in steps of 25, with 0, 25, 50, 75, and 100 labeled under the track.

Level and 50 sit above the track. Under it, 0, 25, 50, 75, and 100 mark every stop. The thumb starts on 50.

Use it when values between the stops mean nothing. A Toggle Group is simpler if the track itself is unnecessary. In React, Ark UI snaps the thumb to each stop.

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>Level</Label>
    <span className="text-muted-foreground text-sm tabular-nums">
      {value[0]}
    </span>
  </div>
  <Slider
    aria-label={["Level"]}
    max={100}
    min={0}
    onValueChange={handleValueChange}
    step={25}
    value={value}
  />
  <div className="flex items-center justify-between text-muted-foreground text-xs tabular-nums">
    <span className="w-6 text-start">0</span>
    <span className="w-6 text-center">25</span>
    <span className="w-6 text-center">50</span>
    <span className="w-6 text-center">75</span>
    <span className="w-6 text-end">100</span>
  </div>
</div>

FAQ

How does it snap?

step is 25, so the thumb only lands on the five stops. The arrow keys move one stop at a time.

How are the stops labeled?

A flex justify-between row of five w-6 spans: the first aligned to the start, the middle three centered and the last to the end, so they sit under the stops.

How does the readout follow the thumb?

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

How is the slider named?

The Level 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 range does it cover?

0 to 100. min and max set the ends.

Can the slider draw its own marks?

Here the labels are plain text under the track, so they look the same on every target. The Ark UI slider also has showMarkers and markerLabels to draw them for you.

API Reference

Label

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

Slider

Sets aria-label={["Level"]}, max={100}, min={0}, onValueChange={handleValueChange}, step={25} and value={value}. The rest is on the Slider page.

All 29 slider examples