Slider

Usage

import { Slider } from "@tulipfarm/sprout/slider";

const [volume, setVolume] = useState(40);
const [range, setRange] = useState([20, 75]);

<Slider
  aria-label="Volume"
  value={volume}
  onValueChange={(next) => setVolume(typeof next === "number" ? next : next[0])}
/>

<Slider
  aria-label="Range"
  value={range}
  onValueChange={(next) => typeof next !== "number" && setRange([...next])}
/>

<Slider aria-label="Disabled" disabled defaultValue={65} />

<div className="h-48">
  <Slider aria-label="Vertical volume" orientation="vertical" defaultValue={60} />
</div>

Pass value and onValueChange to control the slider, or defaultValue to let it keep its own state. A number gets one thumb; an array gets one thumb per entry. With no value, the slider has one thumb at min.

Props

min defaults to 0 and max to100. orientation is"horizontal" (fills its parent's width) or"vertical" (fills its parent's height, at least 160px). The track is 4px thick and the thumb is 12px, kept inside the track ends.

disabled dims the slider to 50% and blocks input; a disabled<fieldset> does the same. The slider also takes Base UI props such as step, largeStep,minStepsBetweenValues, name,format, onValueCommitted, and state functions for className.

Accessibility

Each thumb is a range input. The root aria-label names the thumbs too; a range adds "minimum" and "maximum". UsegetAriaLabel for other names, oraria-labelledby to point at visible text.getAriaValueText sets the spoken value.

Tab moves between thumbs. Arrow keys move one step, Page Up and Page Down move one largeStep, and Home and End jump to the ends. Hover, drag, and keyboard focus show a 3px ring that fades in over 120ms; the fade stops when reduced motion is requested. In forced colors mode the track, range, and thumb use system colors.

Theme tokens

The track uses --sprout-input and the filled range uses--sprout-primary, so the opt-in TulipFarm theme tints it green. The thumb is white with a --sprout-focus border and ring. Override --sprout-slider-thumb to change the thumb fill.