Slider

Controlled single-thumb slider for picking a numeric value within a min/max range.

Slider lets the user pick a number by dragging a thumb along a track. It is controlled: value is a one-entry array and onValueChange returns the updated array as the thumb moves. Constrain the range with min, max, and step, add a label, and pass formatValue to render the displayed number (e.g. as a percentage or currency). The thumb is keyboard-adjustable with the arrow keys.

Example

Preview

Confidence20 – 80

import { Slider } from '@officina/ui';
import { useState } from 'react';

function VolumeSlider() {
  const [value, setValue] = useState([40]);
  return (
    <Slider
      label="Volume"
      value={value}
      onValueChange={setValue}
      min={0}
      max={100}
      step={5}
      formatValue={(n) => `${n}%`}
    />
  );
}

API

Prop	Type	Default	Description
onValueChange*	(value: number[]) => void	—	Called with the updated value array as thumbs move.
value*	number[]	—	Current thumb value(s). One entry per thumb.
disabled	boolean	—
formatValue	(n: number) => string	—	Format a raw value for display (e.g. add a "$").
invalid	boolean	—	Marks the field invalid for validation styling and `aria-invalid`.
label	string	—	Visible label above the track.
max	number	100	Maximum value. Defaults to 100.
min	number	0	Minimum value. Defaults to 0.
name	string	—	Form field name, for native form submission / form libraries.
step	number	1	Step increment. Defaults to 1.

Example

API

On this page