OptionSlider

A compact control for choosing one option from a small set

Installation

pnpm add @wandercom/design-system-web

Usage

16 lines
import { OptionSlider } from '@wandercom/design-system-web/ui/option-slider';

export function Example() {
  return (
    <OptionSlider
      aria-label="Select slide"
      defaultValue="slide-1"
      options={[
        { label: 'Slide 1', value: 'slide-1' },
        { label: 'Slide 2', value: 'slide-2' },
        { label: 'Slide 3', value: 'slide-3' },
        { label: 'Slide 4', value: 'slide-4' },
      ]}
    />
  );
}

Examples

Loading example...

Use the option slider to choose one value from a short, ordered set, typically three or four options. Drag the thumb, select a stop, or use the keyboard. Each option needs a short accessible label. Use a toggle group when options need visible labels or are not meaningfully ordered.

Controlled state

Use value and onValueChange for controlled state.

12 lines
const [value, setValue] = useState('slide-2');

<OptionSlider
  aria-label="Select slide"
  options={[
    { label: 'Slide 1', value: 'slide-1' },
    { label: 'Slide 2', value: 'slide-2' },
    { label: 'Slide 3', value: 'slide-3' },
  ]}
  value={value}
  onValueChange={setValue}
/>

Disabled state

Disable the slider when selection is unavailable.

10 lines
<OptionSlider
  aria-label="Select layout"
  defaultValue="layout-1"
  disabled
  options={[
    { label: 'Layout 1', value: 'layout-1' },
    { label: 'Layout 2', value: 'layout-2' },
    { label: 'Layout 3', value: 'layout-3' },
  ]}
/>

Props

OptionSlider

options:

{ label: string; value: string }[]
Ordered options represented by the slider stops.

defaultValue?:

string
Default selected value when the component is uncontrolled.

value?:

string
Controlled selected value.

onValueChange?:

(value: string, eventDetails: ChangeEventDetails) => void
Callback fired while the selected option changes.

onValueCommitted?:

(value: string, eventDetails: CommitEventDetails) => void
Callback fired when pointer or keyboard interaction completes.

disabled?:

boolean
Disables all options when true.

aria-label?:

string
Accessible name for the option slider. Required unless aria-labelledby is provided.

aria-labelledby?:

string
IDs of elements that label the option slider. Required unless aria-label is provided.

aria-describedby?:

string
IDs of elements that describe the option slider.

className?:

string
Additional CSS classes to apply.

Accessibility

The option slider is built on Base UI Slider and follows the WAI-ARIA slider pattern. Provide an accessible name with aria-label or aria-labelledby. Each option label is announced through the thumb's aria-valuetext. Do not rely on dot position alone to communicate meaning.

Keyboard interaction:

  • ArrowRight / ArrowUp - Select the next option
  • ArrowLeft / ArrowDown - Select the previous option
  • Home - Select the first option
  • End - Select the last option
  • PageUp / Shift + ArrowRight / Shift + ArrowUp - Select the next option
  • PageDown / Shift + ArrowLeft / Shift + ArrowDown - Select the previous option

Drag the thumb or press a stop to change the selected option with a pointer.

Platform notes

Option slider is currently available on web only.

Limitations

Use three or four ordered options. Individual disabled stops are not supported. Disable the entire control or use a toggle group when specific options can be unavailable.

Related components

  • Toggle group - Use when each option needs visible text or an icon
OptionSlider