widgets rangeSlider

Edit this page

Description

The range slider is a widget which provides a user-friendly way to filter the results based on a single numeric range.

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 (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.rangeSlider({ container: string|HTMLElement, attributeName: string, tooltips: [boolean|RangeSliderTooltipOptions], templates: [RangeSliderTemplates], autoHideContainer: [boolean], cssClasses: [RangeSliderCssClasses], pips: [boolean], precision: [number], collapsible: [boolean|RangeSliderCollapsibleOptions], step: [number], min: [number], max: [number], }: RangeSliderWidgetOptions);
search.addWidget(widget);

Options

RangeSliderWidgetOptions

  • containerstring|HTMLElement

    CSS Selector or DOMElement to insert the widget.

  • attributeNamestring

    Name of the attribute for faceting.

  • tooltips[boolean|RangeSliderTooltipOptions]
    Default value: true

    Should we show tooltips or not. The default tooltip will show the raw value. You can also provide an object with a format function as an attribute. So that you can format the tooltip display value as you want

  • templates[RangeSliderTemplates]

    Templates to use for the widget.

  • autoHideContainer[boolean]
    Default value: true

    Hide the container when no refinements available.

  • cssClasses[RangeSliderCssClasses]

    CSS classes to add to the wrapping elements.

  • pips[boolean]
    Default value: true

    Show slider pips.

  • precision[number]
    Default value: 0

    Number of digits after decimal point to use.

  • collapsible[boolean|RangeSliderCollapsibleOptions]
    Default value: false

    Hide the widget body and footer when clicking on header.

  • step[number]

    Every handle move will jump that number of steps.

  • 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.

RangeSliderTooltipOptions

  • format(number) => string

    The function takes the raw value as input, and should return a string for the label that should be used for this value. format: function(rawValue) {return '$' + Math.round(rawValue).toLocaleString()}

RangeSliderTemplates

  • header[string|function]
    Default value: ""

    Header template.

RangeSliderCssClasses

  • root[string|Array<string>]

    CSS class to add to the root element.

  • header[string|Array<string>]

    CSS class to add to the header element.

  • body[string|Array<string>]

    CSS class to add to the body element.

RangeSliderCollapsibleOptions

  • collapsed[boolean]

    Initially collapsed state of a collapsible widget.

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.rangeSlider({
    container: '#price',
    attributeName: 'price',
    templates: {
      header: 'Price'
    },
    tooltips: {
      format: function(rawValue) {
        return '$' + Math.round(rawValue).toLocaleString();
      }
    }
  })
);

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