RangeFilter

Numeric min–max filter with a dual-handle slider and paired number inputs, inside a popover.

RangeFilter filters a numeric column by a [min, max] span. It pairs a dual-handle slider with two number inputs (kept in sync) inside a popover, bounded by the min/max you provide and stepped by step. It is controlled via the value tuple and onChange, and shows an active badge whenever the range is narrower than the full bounds. Use it for price, age, or score filters.

Example

Preview

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

function PriceFilter() {
  const [range, setRange] = useState<[number, number]>([0, 1000]);
  return (
    <RangeFilter label="Price" value={range} onChange={setRange} min={0} max={1000} step={10} />
  );
}

API

Prop	Type	Default	Description
label*	string	—	Filter label shown on the trigger.
max*	number	—	Upper bound of the slider.
min*	number	—	Lower bound of the slider.
onChange*	(value: [number, number]) => void	—	Called with the new [min, max] tuple.
value*	[number, number]	—	Selected [min, max] range.
inline	boolean	false	Render inline instead of inside a popover.
step	number	1	Step increment.

Example

API

On this page