Components

Slider

Headless slider primitives for single-value and range inputs.

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

• 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.
• 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.

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} ariaLabel="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} ariaLabel="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 ariaLabel, and use ariaValueText when a raw number would not explain the value.

Changelog

See CHANGELOG.md.