Inputs

Slider

A draggable, keyboard-navigable slider. Pass a two-element tuple as the value to get a range slider with two thumbs instead of one.

Slider

Preview

Price range — 20 – 80

Usage

tsx

import { Slider } from "@vesture/react";

function Example() {
  const [price, setPrice] = useState([20, 80]);
  return (
    <Slider
      aria-label={["Minimum price", "Maximum price"]}
      value={price}
      onChange={setPrice}
      min={0}
      max={200}
    />
  );
}

Behavior

value is a number for a single thumb, or [number, number] to render two thumbs for a range.
Each thumb is role="slider" with aria-valuemin/max/now/text; ArrowLeft/Right/Up/Down step by step, Home/End jump to min/max, PageUp/PageDown step by 10×.
Clicking the track drags the nearest thumb; range thumbs are clamped so start never exceeds end.
formatValue customizes the aria-valuetext and any label you render from the current value.

Props

Prop	Type	Default	Description
value / defaultValue / onChange	number \| [number, number]	—	Controlled / uncontrolled value — a tuple renders a range slider.
min / max	number	0 / 100	Bounds for both single and range mode.
step	number	1	Increment used by drag-snapping and keyboard steps.
aria-label	string \| [string, string]	—	Single label, or [start, end] labels for a range slider's two thumbs.
formatValue	(value: number) => string	—	Formats aria-valuetext, e.g. (v) => `$${v}`.
disabled	boolean	—	Disables dragging and keyboard interaction.