widgets numericSelector

Edit this page

Description

This widget lets the user choose between numerical refinements from a dropdown menu.

Requirements

The attribute passed to attributeName must be declared as an attribute for faceting in your Algolia settings.

The values inside this attribute must be JavaScript numbers and not strings.

Live example

You can find an example at the end of the page or a live example in our widget showcase.

Usage

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

const widget = instantsearch.widgets.numericSelector({ container: string|HTMLElement, attributeName: string, options: Array<NumericOption>, operator: [string], autoHideContainer: [boolean], transformItems: [(Array<object>) => Array<object>], cssClasses: [NumericSelectorCSSClasses], }: NumericSelectorWidgetOptions);
search.addWidget(widget);

Options

NumericSelectorWidgetOptions

  • containerstring|HTMLElement

    CSS Selector or HTMLElement to insert the widget.

  • attributeNamestring

    Name of the numeric attribute to use.

  • optionsArray<NumericOption>

    Array of objects defining the different values and labels.

  • operator[string]
    Default value: '='

    The operator to use to refine.

  • autoHideContainer[boolean]
    Default value: false

    Hide the container when no results match.

  • transformItems[(Array<object>) => Array<object>]

    Function to transform the items passed to the templates.

  • cssClasses[NumericSelectorCSSClasses]

    CSS classes to be added.

NumericOption

  • valuenumber

    The numerical value to refine with. If the value is undefined or "undefined", the option resets the filter.

  • labelstring

    Label to display in the option.

NumericSelectorCSSClasses

  • root[string|Array<string>]

    CSS classes added to the outer <div>.

  • select[string|Array<string>]

    CSS classes added to the parent <select>.

  • item[string|Array<string>]

    CSS classes added to each <option>.

Widget

  • render[function]

    Called after each search response has been received

  • getConfiguration[function]

    Let the widget update the configuration of the search with new parameters

  • init[function]

    Called once before the first search

Example

search.addWidget(
  instantsearch.widgets.numericSelector({
    container: '#rating-selector',
    attributeName: 'rating',
    operator: '=',
    options: [
      {label: 'All products'},
      {label: 'Only 5 star products', value: 5},
      {label: 'Only 4 star products', value: 4},
      {label: 'Only 3 star products', value: 3},
      {label: 'Only 2 star products', value: 2},
      {label: 'Only 1 star products', value: 1},
    ]
  })
);

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