Components

Slider

Pick a value or a range by dragging a thumb along a track, or with the arrow keys.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The value shows next to the label; the bubble above the thumb appears while dragging and on keyboard focus.

Level

Drag, or use the arrow keys.

import { Provider, Slider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Slider label="Level" defaultValue={40} description="Drag, or use the arrow keys." className="max-w-sm" />
    </Provider>
  );
}

Range

A [low, high] value draws two thumbs; minStepsBetweenValues is the smallest gap between them.

Range

20 – 60

import { Provider, Slider } from '@bigbang/ui';

export default function Range() {
  return (
    <Provider locale="en-GB">
      <Slider label="Range" defaultValue={[20, 60]} minStepsBetweenValues={5} className="max-w-sm" />
    </Provider>
  );
}

Format

format takes Intl.NumberFormat options; the value is written and read in the Provider language.

Level

25%

Duration

12 days

import { Provider, Slider } from '@bigbang/ui';

export default function Formatted() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-xl">
        <Slider label="Level" defaultValue={0.25} min={0} max={1} step={0.05} format={{ style: 'percent' }} />
        <Slider label="Duration" defaultValue={12} min={0} max={30} format={{ style: 'unit', unit: 'day', unitDisplay: 'long' }} />
      </div>
    </Provider>
  );
}

Marks

marks puts ticks and labels under the track; they are not read by screen readers.

Level

import { Provider, Slider } from '@bigbang/ui';

export default function Marks() {
  return (
    <Provider locale="en-GB">
      <Slider
        label="Level"
        defaultValue={50}
        step={25}
        marks={[{ value: 0, label: 'Low' }, { value: 25 }, { value: 50, label: 'Medium' }, { value: 75 }, { value: 100, label: 'High' }]}
        className="max-w-sm"
      />
    </Provider>
  );
}

Disabled

The thumb and track fade.

Level

import { Provider, Slider } from '@bigbang/ui';

export default function Disabled() {
  return (
    <Provider locale="en-GB">
      <Slider label="Level" defaultValue={40} disabled className="max-w-sm" />
    </Provider>
  );
}

Light and dark mode

The filled track takes the primary action colour.

Range

20 – 60

Range

20 – 60

import { Provider, Slider } from '@bigbang/ui';

export default function Range() {
  return (
    <Provider locale="en-GB">
      <Slider label="Range" defaultValue={[20, 60]} minStepsBetweenValues={5} className="max-w-sm" />
    </Provider>
  );
}