Slider

When to use

Slider is for settings where relative position matters more than an exact number: a level, an intensity, a filter range.

When not to use

• For an exact number: use NumberField; typing is faster than dragging.
• For amounts: do not make people drag to an amount; use AmountInput.
• For a few options: with three or four steps, RadioGroup is clearer.

Anatomy

Level

40

40

Drag, or use the arrow keys.

LightDark

Copy code

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>
  );
}

1. Label and value: Label on the left, formatted value on the right.
2. Track: 4 px; the filled part in the primary colour.
3. Thumb: 20 px; a 40 px touch area. It stays inside the track ends.
4. Value bubble: While dragging, on hover and on keyboard focus.
5. Marks and description: Under the track.

Behaviour

• The thumb grows a little on hover and a little more while held; it springs back on release.
• Clicking the track or pressing a key glides the thumb; while dragging the thumb follows the pointer with no delay.
• onValueChange runs on every change, onValueCommitted once on release; tie heavy work to the latter.
• In a range the thumbs do not pass each other.
• orientation="vertical" stands the track up, at least 160 px tall; use it for a level beside a preview, such as volume.

Guidelines

• Keep the value visible (showValue); position alone is not enough.
• Give the unit through format; do not write it in the label.
• If there are very many steps (such as 1–10,000), offer a NumberField too.

Content

Turkish	English
alt değer	lower value
üst değer	upper value

Related components

• NumberField: An exact number.
• RadioGroup: A few options.