Slider

When to Use

Use Slider when someone adjusts a number by feel, such as volume, zoom, or a price range. Use NumberInput when the exact typed number matters, and use Progress when the value is read-only and only reports work being completed.

Features

The behavior Atom owns before your product adds appearance.

• Supports single-value and multi-thumb range values.
• Supports controlled and uncontrolled values.
• Supports horizontal and vertical orientation.
• Supports pointer dragging, keyboard changes, and commit callbacks.
• Preserves page scrolling on the non-slider axis, reverts true pointer cancellation, and commits the latest value when capture is lost.
• Supports hidden form inputs.
• Supports Direction.Provider for horizontal right-to-left pointer and keyboard behavior.
• Exposes geometry through data attributes and inline offset styles.

Import

import { Slider } from "@flowstack-ui/atom";

Anatomy

<Slider.Root>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb />
  </Slider.Track>
</Slider.Root>

API Reference

Root

Owns the numeric range, thumb values, pointer calculations, keyboard changes, and hidden form inputs. Root renders a div; each Thumb owns slider semantics.

ARIA: Root adds no role or ARIA attributes. Its label and value-text props are applied to each Thumb.

Track

Registers the pointer interaction surface used to choose and drag the nearest Thumb. It renders a div by default. Horizontal Tracks preserve vertical page scrolling; vertical Tracks preserve horizontal scrolling.

ARIA: Track adds no role or ARIA attributes.

Range

Reports the selected start and end percentages and supplies the inline offset geometry for a visual fill. It is decorative.

Thumb

Renders one focusable slider control and connects its index to the matching value in Root. Range sliders need one Thumb for each value.

Advanced compound parts can use useSliderContext and SliderContextProvider. Public range, percentage, snapping, closest-thumb, and offset helpers expose the same calculations used by the built-in parts.

Examples

Single Value

import { Slider } from "@flowstack-ui/atom";

export default function VolumeSlider() {
  return (
    <Slider.Root defaultValue={50} aria-label="Volume">
      <Slider.Track><Slider.Range /><Slider.Thumb /></Slider.Track>
    </Slider.Root>
  );
}

Range

import { Slider } from "@flowstack-ui/atom";

export default function PriceRange() {
  return (
    <Slider.Root defaultValue={[20, 80]} minStepsBetweenThumbs={2} aria-label="Price">
      <Slider.Track>
        <Slider.Range />
        <Slider.Thumb index={0} />
        <Slider.Thumb index={1} />
      </Slider.Track>
    </Slider.Root>
  );
}

Accessibility

Slider follows the WAI-ARIA slider pattern. Each Thumb is a focusable slider with its own value. Provide native aria-label, or use Field for the label and messages. ariaValueText can describe non-obvious values. Field state reaches every Thumb, read-only blocks editing, and uncontrolled values reset to defaultValue. Pointer cancellation restores the value present at pointer down and does not call onValueCommit. Lost pointer capture finalizes the latest value so normal browser capture release cannot make a completed click or drag jump backward. Only one pointer session can control a Slider at a time.

Changelog

Unreleased

0.24.0

• Added public Agent Knowledge for component selection, required composition, recurring mistakes, and validation.

0.19.4

• Finalize the latest pointer value when capture is lost instead of restoring the pointer-down value; true pointercancel still rolls back without commit.

0.19.3

• Exposed effective adjacent-thumb bounds through each Thumb's ARIA range.
• Preserved non-slider-axis page scrolling and restored the pointer-down value without committing when a drag is cancelled or capture is lost.

0.5.0

• Added Field disabled/read-only/invalid/required, generated naming and description integration, native aria-label, and uncontrolled reset.

0.2.0

• Added Direction.Provider support for horizontal right-to-left pointer and keyboard behavior.
• Fixed percent geometry so data-percent and inline percent offsets do not expose floating-point artifacts such as 55.00000000000001.

0.1.0

• Initial Atom release.