connectors connectRange

Edit this page


Range connector provides the logic to create custom widget that will let the user refine results using a numeric range.

This connectors provides a refine() function that accepts bounds. It will also provide information about the min and max bounds for the current result set.


const search= instantsearch(/* parameters */);

const makeRange= instantsearch.connectors.connectRange(
function renderFn(
renderOpts: RangeRenderingOptions,
isFirstRendering: boolean) {
// render the custom Range widget
} );

const customRange = makeRange(instanceOpts: CustomRangeWidgetOptions);

Connector options


  • refine(Array<number,number>) => undefined

    Sets a range to filter the results on. Both values are optional, and will default to the higher and lower bounds. You can use undefined to remove a previously set bound or to set an infinite bound.

  • range{min: number, max: number}

    Results bounds without the current range filter.

  • startArray<number,number>

    Current numeric bounds of the search.

  • formatter{from: function, to: function}

    Transform for the rendering from and/or to values. Both functions take a number as input and should output a string.

  • widgetParamsObject

    All original CustomRangeWidgetOptions forwarded to the renderFn.


  • attributeNamestring

    Name of the attribute for faceting.

  • min[number]
    Default value: undefined

    Minimal range value, default to automatically computed from the result set.

  • max[number]
    Default value: undefined

    Maximal range value, default to automatically computed from the result set.

  • precision[number]
    Default value: 2

    Number of digits after decimal point to use.

Can't find what you are looking for? Open an issue, we'll get back to you.