Slider

A single-value or range slider with a rolling readout, value bubble, optional marks and rubber-band resistance at the limits.

When to use

• Picking a value by feel within known bounds: storage, rent ranges, rate limits.
• Ranges: pass a [low, high] pair for two thumbs.
• For exact entry use NumberField; for a playful control with detents and stretch use ElasticSlider.

Usage

import { Slider } from "@/components/iris/slider/slider";
function RentFilter() {
  const [range, setRange] = React.useState([380, 620]);
  return h(Slider, {
    label: "Monthly rent",
    value: range,
    onValueChange: setRange,
    min: 200,
    max: 2000,
    step: 10,
    format: (v) => `€${v.toLocaleString("en-US")}`,
    thumbLabels: ["Minimum rent", "Maximum rent"],
  });
}

Props

Prop	Type	Default	Description
label	string	required	Visible label; names the thumbs unless thumbLabels is set.
value / defaultValue	number | [number, number]	–	A number for one thumb, a pair for a range.
onValueChange	(value) => void	–	Called on every step while dragging or pressing keys.
onValueCommit	(value) => void	–	Called once when a drag ends or a key changes the value.
min / max / step	number	0 / 100 / 1	Bounds and increment.
largeStep	number	a tenth of the range	PageUp/PageDown and Shift+arrow distance.
marks	(number | { value: number; label?: string })[]	–	Ticks; labelled marks print under the track and are clickable.
minStepsBetweenThumbs	number	0	Closest two range thumbs may sit, in steps.
format	(value: number) => string	–	Formats readout, bubble and aria-valuetext.
showValue	boolean	true	Readout beside the label.
thumbLabels	[string, string]	–	Accessible names for range thumbs.
start / end	ReactNode	–	Content beside the track, such as icons.
name / disabled / className	string / boolean / string	–	Hidden form inputs, disabled state, root class.

Notes

• Thumbs are role="slider" with aria-valuenow/min/max/text; arrows step, PageUp/PageDown and Shift take largeStep, Home/End jump. Pointer focus stays quiet (no ring or bubble until a key is used).
• Release momentum can carry the thumb a little; dragging past a limit stretches with rubber-band resistance. Reduced motion removes springs and the digit roll.
• The root fills its container width. Set --slider-thumb (22px) and --slider-track (6px) on it, for example through className, to resize.
• Reads the control-track, control-fill, control-glyph and control-thumb tokens, ink-2 for the readout and ink-3 for mark labels.