Slider

Selects one value from a range. 2px track, 14px thumb, 24px hit area.

Preview

In action

Ink

Density

When to use

Use it for

A number inside a known range where the position matters more than the digits.
Volume, opacity, zoom, and similar live values.

Not for

Exact values; use Input type="number".
Ranges with two thumbs; the component has one.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Slider } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/slider.

2. Vendor the source

npx @noorddev/vlak-cli add slider

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/slider.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { useState } from "react";
import { Slider } from "@noorddev/vlak-react";

const [volume, setVolume] = useState(62);

<Slider value={volume} onValueChange={setVolume} min={0} max={100} step={1} aria-label="Volume" />

Props

Slider

A native range input drives the ink track.

Prop	Type	Default
`value`	`number`
`defaultValue`	`number`	`50`
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`onValueChange`	`(value: number) => void`

Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange">.

Keyboard

Keys	Does
`Tab`	Moves focus to the slider
`Arrow right, Arrow up`	Increases by step
`Arrow left, Arrow down`	Decreases by step
`Home, End`	Jumps to min or max

Accessibility

A native <input type="range"> drives the ink track; the platform exposes value, min, and max.
It has no visible text; pass aria-label or aria-labelledby.
The 14px thumb sits on a 24px hit area and shows a focus ring on :focus-visible.

Markup

<div class="rs-slider"><span class="rs-slider-fill" style="width:62%"></span><span class="rs-slider-thumb" style="left:62%"></span></div>

Classes

.rs-slider.rs-slider-fill.rs-slider-thumb.rs-slider-thumb-focused.rs-slider-range