Numeric Range Filters

Range filters are used to restrict the results to decimal values within a range. This is typically used for price ranges.

A query for numeric range filters looks like this:

... on NumericRangeFilter {
  id
  min
  max
  name
  value @client
  isActive @client
}

Notice the @client directives. These are added by the Flight framework and reflect the current value and active state of the filter.

value returns an array with 2 values: [min, max], indicating the current value of the filter.

useRangeFilter

The useRangeFilter hook can be used to update the range filter values for a NumericRangeFilter.

const { apply } = useRangeFilter({ filter });

Arguments

Argument	Type	Required?	Description
options	Options	true	Required options object

Options

Option	Type	Required?	Description
filter	NumericRangeFilter	true	The NumericRangeFilter you would like to act on

Result

Property	Type	Description
apply	({ min, max }: { min: number, max: number }) => `Promise<ExecutionResult<NumericRangeFilter>>`	Applies the given values to the range filter. Returns a promise that will resolve with the range filter.

Example

A typical way to use this component is with a range slider UI component. You can see a full example here in Trend. For the example, we have used react-slider.

A simple example below shows just the hook in action, without detailing how to use react-slider:

function RangeFilter({ filter }) {
  const { apply } = useRangeFilter({ filter });

  // Note that filter.value will be null if no value has been set
  const [currentMin, currentMax] = filter.value || [filter.min, filter.max];

  function increaseRange() {
    apply({ min: currentMin - 1, max: currentMax + 1 })
  }

  return (
    <>
      <h1>{filter.name}</h1>
      <div>Is active?: {filter.isActive ? 'true' : 'false'}<div>

      <div>The current range is: {currentMin} - {currentMax}</div>

      <button onClick={increaseRange}>Increase the range</button>
    </>
  );
}