Slider

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Adjust an approximate value or range within bounds. Show the value with its unit. Pair it with a NumberField for precise adjustment.

• Don't make dragging the only path where exact values matter. Add a NumberField instead.
• Don't give both thumbs of a range the same name. Set a distinct aria-label on each Thumb.
• Don't convey the current value with color alone. Show it in Value with its unit.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root → Label + Value + Control(Track/Indicator + one or more Thumbs)

Keyboard and accessibility

• Tab moves to each Thumb's range input.
• Arrow keys move by step, and Page Up and Page Down move by largeStep. Home and End jump to the bounds.
• The default thumbAlignment=edge keeps thumbs inside the control.
• Form reset restores only uncontrolled values. It keeps controlled values and respects canceled resets.
• Give each range thumb its own name and unit.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Slider } from '@surflane/ui'

<Slider.Root name='workers' defaultValue={3} min={1} max={16}>
  <Slider.Label>Parallel workers</Slider.Label>
  <Slider.Value>{(_, values) => `${values[0]} workers`}</Slider.Value>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
    </Slider.Track>
    <Slider.Thumb getAriaValueText={(_, value) => `${value} workers`} />
  </Slider.Control>
</Slider.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens