Slider

Overview

Slider wraps a native <input type="range"> with a styled track, thumb, focus tooltip, and optional step dots/markers. It's a controlled component — pass value and onChange to drive it, the same way you would a plain range input.

It supports a single numeric value (there's no dual-thumb/range-selection mode), a horizontal or vertical layout, and can render evenly-spaced interval markers either at a fixed spacing or auto-fitted to the available width.

Import

import { Slider } from '@unflow.io/ui/components/Slider';

Props

Basic usage

const [value, setValue] = useState(25);

<Slider
  name="volume"
  label="Volume"
  value={value}
  onChange={(e) => setValue(Number(e.currentTarget.value))}
/>

Interval markers

Set steps/interval for fixed spacing, or autoInterval to let the slider fit as many markers as the available width allows.

const [value, setValue] = useState(40);

<Slider
  name="progress"
  label="Progress"
  value={value}
  onChange={(e) => setValue(Number(e.currentTarget.value))}
  steps={10}
  interval={20}
  autoInterval
/>

Vertical

const [value, setValue] = useState(60);

<Slider
  name="vertical-volume"
  label="Volume"
  direction="vertical"
  value={value}
  onChange={(e) => setValue(Number(e.currentTarget.value))}
  startLabel="Min"
  endLabel="Max"
/>

Disabled

<Slider name="disabled-slider" label="Volume" value={30} disabled />

Customization (slots & slotProps)

Accessibility

• The native <input type="range"> carries the implicit slider role, so screen readers announce the label, current value, and min/max out of the box.
• label/hint/status are wired through InputLabel, keeping the label associated with the input via id/name and exposing status messages.
• The focus tooltip uses role="tooltip" and appears on keyboard focus, not just on drag, so keyboard users get the same value feedback as mouse users.
• Step dots and interval markers are purely decorative (inert) and never receive focus or get announced.