RangeSlider

Controlled two-thumb slider for selecting a lower and upper bound within a range.

RangeSlider is a two-thumb slider for choosing a span — a min and a max — such as a price or date range filter. It is controlled: value is a [number, number] tuple and onValueChange returns the updated tuple. Tune the bounds with min, max, and step, keep the thumbs apart with minStepsBetweenThumbs, and format the visible numbers with formatValue.

Example

Preview

Price range$25 – $75

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

function PriceFilter() {
  const [range, setRange] = useState<[number, number]>([20, 80]);
  return (
    <RangeSlider
      label="Price range"
      value={range}
      onValueChange={setRange}
      min={0}
      max={100}
      minStepsBetweenThumbs={1}
      formatValue={(n) => `$${n}`}
    />
  );
}

API

Prop	Type	Default	Description
onValueChange*	(value: [number, number]) => void	—	Called with the new [start, end] tuple as either thumb moves.
value*	[number, number]	—	Current [start, end] values.
disabled	boolean	—
formatValue	(n: number) => string	—	Format thumb/value captions (e.g. add a unit or currency).
invalid	boolean	—	Marks the field invalid for validation styling and `aria-invalid`.
label	string	—	Visible label above the slider.
max	number	100	Upper bound of the track. Defaults to 100.
min	number	0	Lower bound of the track. Defaults to 0.
minStepsBetweenThumbs	number	0	Minimum number of steps to keep between the two thumbs.
name	string	—	Form field name, for native form submission / form libraries.
step	number	1	Step increment between values.

Example

API

On this page