widgets rangeInput

Description

The range input widget allows a user to select a numeric range using a minimum and maximum input.

Requirements

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

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

Live example

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

Usage

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

const widget = instantsearch.widgets.rangeInput({ 
  container: string|HTMLElement, 
  attribute: string, 
  min: [number], 
  max: [number], 
  precision: [number], 
  templates: [RangeInputTemplates], 
  cssClasses: [RangeInputClasses], 
}: RangeInputWidgetOptions);

search.addWidget(widget);

Options

RangeInputWidgetOptions

• containerstring|HTMLElement

  Valid CSS Selector as a string or DOMElement.

• attributestring

  Name of the attribute for faceting.

• min[number]

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

• max[number]

  Maximal slider value, defaults to automatically computed from the result set.

• precision[number]
  Default value: 0

  Number of digits after decimal point to use.

• templates[RangeInputTemplates]

  Labels to use for the widget.

• cssClasses[RangeInputClasses]

  CSS classes to add.

RangeInputTemplates

• separatorText[string]
  Default value: "to"

  The label of the separator, between min and max.

• submitText[string]
  Default value: "Go"

  The label of the submit button.

RangeInputClasses

• root[string|Array<string>]

  CSS class to add to the root element.

• noRefinement[string|Array<string>]

  CSS class to add to the root element when there’s no refinements.

• form[string|Array<string>]

  CSS class to add to the form element.

• label[string|Array<string>]

  CSS class to add to the label element.

• input[string|Array<string>]

  CSS class to add to the input element.

• inputMin[string|Array<string>]

  CSS class to add to the min input element.

• inputMax[string|Array<string>]

  CSS class to add to the max input element.

• separator[string|Array<string>]

  CSS class to add to the separator of the form.

• submit[string|Array<string>]

  CSS class to add to the submit button of the form.

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.rangeInput({
    container: '#range-input',
    attribute: 'price',
    templates: {
      separatorText: 'to',
      submitText: 'Go'
    },
  })
);

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