Skip to content

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

Free

Slider with Step Indicators for Svelte

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

UI library: Ark UI

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 Svelte, Ark UI snaps the thumb to each stop.

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"><Label>Level</Label><span class="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 class="flex items-center justify-between text-muted-foreground text-xs tabular-nums"><span class="w-6 text-start">0</span><span class="w-6 text-center">25</span><span class="w-6 text-center">50</span><span class="w-6 text-center">75</span><span class="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