React SDK


The RangeFilterBuilder class is used to construct range filters for use with the relevant SearchProvider. They can later be referenced by the useFilter hook or Filter component.



The constructor accepts a single object with the following properties:

namestringThe name of the filter. This should be unique.
groupstringA group name, for grouping multiple filters together using ARRAY_MATCH.
fieldstringA field in schema.
initial[number, number]nullAn intially selected range.
minnumber0The min value of the filter.
maxnumberaggregate ? 0 : 100The max value of the filter.
stepnumber1A number that specifies the granularity that the values must adhere to.
aggregatebooleantrueIf true, set value for min and max from the backend response.
formatter(value: [number, number]) => [number, number]The function to format the range. By default, this will round to the nearest step for the value. For example if step is 1, the formatter will format [0.1, 5.5] to [0, 6].


For more advanced implementations, you may want to access properties on the FilterBuilder instance.

listen(event: string, callback: (filter: RangeFilterBuilder) => void)Register a listener for a specific event.
get()Get the current range of the filter.
set(range: [number, number] OR null, emitEvent: boolean)Set the current range of the filter and optionally emit an event.
reset(emitEvent?: boolean)Reset the current filter to the initial values.
setMin(value: number)Set the minimum value.
setMax(value: number)Set the maximum value.
getMinMax()Returns the current min and max in an array.
getStep()Returns the number that specifies the granularity that the values must adhere to.
filter()Builds up the filter string from the current filter and it's children.
getName()Returns the name property of the filter.
getGroup()Returns the group property of the filter.
getField()Returns the field property of the filter.
isAggregate()Returns a boolean to indicate if the filter is using an aggregate.
hasChanged()Returns a boolean to indicate if the filter's current value differs from the initial value.

Listen example