Slider

In FORMA

• Liegt in kit/arc/slider und ist über @/forma/arc/slider/slider erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• Approximate values like volume, opacity, or a price range.
• Ranges with two thumbs, labelled marks, and a formatted readout.

When not to use

• Use number-field when the exact number matters.
• Use progress to show a value people cannot change.

Usage

import { Slider } from "@/forma/arc/slider/slider";

export function PriceFilter() {
  const [range, setRange] = useState<[number, number]>([20, 80]);
  return (
    <Slider
      label="Price"
      value={range}
      onValueChange={setRange}
      step={5}
      format={(v) => `$${v}`}
      thumbLabels={["Minimum price", "Maximum price"]}
    />
  );
}

API reference

Slider

A single or range slider with momentum dragging, marks, a value bubble, and a rolling readout.

Keyboard interactions

Accessibility

• Each thumb is role="slider" with aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext from format, and aria-orientation.
• Thumbs are named by label, or by thumbLabels for ranges.
• The readout, bubble, and marks are aria-hidden because the thumbs carry the value.

Motion

• Released drags carry a little momentum before snapping; the bubble springs up over an active thumb and digits roll in the readout. At a limit the thumb strains toward the key press and springs back.
• Reduced motion removes momentum, the strain, and digit rolling, and turns off CSS transitions.

Responsive behavior

• It fills its column; the track uses touch-action pan-y, so horizontal drags move the thumb while vertical swipes scroll the page.
• On coarse pointers the value bubble sits higher so the finger does not cover it.
• The bubble and end mark labels clamp inside the track so they never overflow the edges.

Performance

• Drags write motion values with pointer capture, so the thumb follows 1:1 without React re-renders per frame.
• onValueChange fires on every step; put fetching or heavy work in onValueCommit.

Notes for AI

• Use for approximate values and ranges like volume, price filters, or opacity. Use number-field when the exact number matters.
• Controlled or uncontrolled; pass a tuple for a range. Put heavy work such as fetching in onValueCommit, not onValueChange.
• Pass name to submit through hidden inputs. Exported as both named and default.

Related

• Number field: Enter a bounded number with clear increment controls.
• Progress: Show how much of a known task is complete.
• Filter toolbar: Keep collection filters close and easy to reset.

Also in sliders

• Elastic slider: A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.
• Range histogram slider: A price range over a live histogram of the data, lighting the bars inside the range and settling on bar edges.

Guidance for AI tools

Slider: Pick a value or a range on a track that follows your finger. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt