Slider | Fragments

Preview

<div style={{ width: '300px' }}>
  <Slider label="Volume" defaultValue={50} />
</div>

Installation

npx @usefragments/cli add slider

Writes src/fragments/ui/components/Slider plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Examples

With Value Display

showValue prints the number opposite the label.

<div style={{ width: '300px' }}>
  <Slider
    label="Brightness"
    defaultValue={75}
    showValue
    valueSuffix="%"

Custom Range

min, max and step bound the track to real-world units.

<div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
  <Slider
    label="Temperature"
    min={60}
    max={80}
    step={1}

Controlled

The parent owns the value and can react to every move.

<ControlledSliderDemo />

Drag Value Bubble

The number floats above the thumb only while dragging.

<div style={{ width: '300px' }}>
  <Slider
    label="Mix"
    defaultValue={40}
    showValueOnDrag
    valueSuffix="%"

With Helper Text

A line below the track explains the trade-off.

<div style={{ width: '300px' }}>
  <Slider
    label="Quality"
    defaultValue={80}
    showValue
    valueSuffix="%"

Disabled

Dimmed; the thumb will not move.

<div style={{ width: '300px' }}>
  <Slider
    label="Locked Setting"
    defaultValue={30}
    showValue
    disabled

API

Component props
Prop	Type	Default	Description
`label`	`string`	Not set	Label text
`helperText`	`string`	Not set	Helper text shown below the slider
`error`	`boolean`	`false`	Show error styling
`value`	`number`	Not set	Controlled value
`defaultValue`	`number`	Not set	Default value for uncontrolled usage
`onChange`	`function`	Not set	Called with new value when changed
`onValueChange`	`function`	Not set	Alias for onChange (Radix convention): (value: number) => void
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step interval
`showValue`	`boolean`	`false`	Display current value
`showValueOnDrag`	`boolean`	`false`	Show current value in a floating bubble while dragging the thumb
`valueSuffix`	`string`		Suffix after value (e.g., "%", "px")
`disabled`	`boolean`	`false`	Disable the slider
`name`	`string`	Not set	—
`aria-label`	`string`	Not set	Accessible label when visible label is omitted
`aria-labelledby`	`string`	Not set	Accessible labelled-by relationship
`aria-describedby`	`string`	Not set	Accessible described-by relationship
`id`	`string`	Not set	—
`form`	`string`	Not set	ID of the form that owns the hidden slider input
`largeStep`	`number`	Not set	Larger step used for Page Up/Page Down and shift-arrow keyboard input
`onValueCommitted`	`function`	Not set	Callback when the user commits a slider value
`thumbAlignment`	`enumcenteredgeedge-client-only`	Not set	How the thumb is aligned at the minimum and maximum edges

Accessibility

Label is tied to the track
Arrow keys move the thumb
The current value is announced
Native slider semantics throughout

Standards

Guidance

Use when

Any value along a range, where roughly right is good enough
Volume, brightness, opacity
Price and range filters
The effect is visible as the user drags

Avoid when

An exact number matters (use Input type="number")
A handful of fixed choices (use RadioGroup or Select)
On or off (use Switch)

InputalternativeUse Input for precise numeric entry
ProgresssiblingSimilar visual, but Progress is read-only

Next steps

Accessibility contractThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.