ElasticSlider

A single-value slider that stretches like rubber past its ends, sways a value tag while dragging and clicks into detents.

When to use

• Expressive single values where feel matters: thresholds, energy levels, intensity.
• When a few values deserve a detent (marks) the thumb should snap to.
• For ranges or plain form sliders use Slider; for exact numbers use NumberField.

Usage

import { ElasticSlider } from "@/components/iris/elastic-slider/elastic-slider";
function VoiceScore() {
  const [score, setScore] = React.useState(70);
  return h(ElasticSlider, {
    label: "Minimum voice score",
    value: score,
    onValueChange: setScore,
    marks: [0, { value: 70, label: "70" }, 100],
    format: (v) => `${v}/100`,
    startIcon: h(FlagIcon), // any 16px icon element
    endIcon: h(BadgeCheckIcon),
  });
}

Props

Prop	Type	Default	Description
label	string	required	Visible label; also names the thumb.
value / defaultValue	number	– / min	Controlled or initial value.
onValueChange	(value: number) => void	–	Called on every change while dragging or pressing keys.
onValueCommit	(value: number) => void	–	Called once a drag ends, a key changes the value, or a mark label is clicked.
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 })[]	–	Detents the dragged thumb clicks into (about 7px reach); labelled marks print under the track.
format	(value: number) => string	–	Formats readout, tag and aria-valuetext.
showValue	boolean	true	Readout beside the label.
startIcon / endIcon	ReactNode	–	Icons at either end, pushed outward when the track is pulled past that side.
name / disabled / className	string / boolean / string	– / false / –	Hidden form input, disabled state, root class.

Notes

• The thumb is role="slider" labelled by the visible label; arrows, PageUp/PageDown, Home/End work, and a key press at a limit bumps the track.
• Detents pop their tick and, where supported, send a short vibration. Reduced motion removes the stretch, sway and springs.
• While the tag rides the thumb, the readout beside the label fades out so the value shows once.
• The root fills its container width. Set --elastic-thumb (24px) and --elastic-track (8px) on it to resize.
• Reads the control-track, control-fill, control-glyph and control-thumb tokens, ink-2 for the readout and ink-3 for icons and mark labels.