Slider

A thin slanted well for a track, the chosen stretch in the accent, and a slab for each thumb that lifts to the accent while it is dragged.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/slider

Examples

One value, and a range

Radio volume40

On duty9:00 – 17:00

slider-basic.tsx

import { useState } from "react";import { Slider } from "@/components/zero/slider";export default function SliderBasic() {  const [volume, setVolume] = useState(40);  const [hours, setHours] = useState([9, 17]);  return (    <div className="grid w-full max-w-md gap-6">      <div className="grid gap-2">        <span className="flex justify-between font-bold font-zero text-zero-sm text-zero-text-2 italic">          Radio volume          <span className="text-zero-text tabular-nums">{volume}</span>        </span>        <Slider          value={volume}          onValueChange={(value) => setVolume(value as number)}          aria-label="Radio volume"        />      </div>      <div className="grid gap-2">        <span className="flex justify-between font-bold font-zero text-zero-sm text-zero-text-2 italic">          On duty          <span className="text-zero-text tabular-nums">            {hours[0]}:00 – {hours[1]}:00          </span>        </span>        <Slider          value={hours}          onValueChange={(value) => setHours(value as number[])}          min={0}          max={24}          minStepsBetweenValues={1}          aria-label="On duty"        />      </div>    </div>  );}

Behaviour

Pass one number for one thumb, or an array of two for a range. Arrow keys move the focused thumb by a step; Page Up and Page Down by more.

Horizontal only. Sized in em.

Props

Slider

Prop	Type	Default	Description
value	number \| number[]	—	The value, controlled; with onValueChange.
defaultValue	number \| number[]	—	The value, uncontrolled.
min	number	0	The lowest value.
max	number	100	The highest value.
step	number	1	How far one arrow key moves a thumb.
minStepsBetweenValues	number	0	For a range: how close the two thumbs may come.

Also takes every prop of Base UI's Slider.Root.