InstantSearch specs

✏️ edit page

RangeInput

Widget example

to

HTML output

<div class="ais-RangeInput">
  <form class="ais-RangeInput-form">
    <label class="ais-RangeInput-label">
      <input class="ais-RangeInput-input ais-RangeInput-input--min" type="number" />
    </label>
    <span class="ais-RangeInput-separator">to</span>
    <label class="ais-RangeInput-label">
      <input class="ais-RangeInput-input ais-RangeInput-input--max" type="number" />
    </label>
    <button class="ais-RangeInput-submit" type="submit">Go</button>
  </form>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-RangeInput the root div of the widget
.ais-RangeInput--noRefinement the root div of the widget with no refinement
.ais-RangeInput-form the wrapping form
.ais-RangeInput-label the label wrapping inputs
.ais-RangeInput-input the input (number)
.ais-RangeInput-input--min the minimum input
.ais-RangeInput-input--max the maximum input
.ais-RangeInput-separator the separator word used between the two inputs
.ais-RangeInput-submit the submit button

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
attribute Attribute to apply the filter to
min Minimum value. When this isn’t set, the minimum value will be automatically computed by Algolia using the data in the index.
max Maximum value. When this isn’t set, the maximum value will be automatically computed by Algolia using the data in the index.
precision 0 Number of digits after decimal point to use.

Translations

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
separatorElementText "to" The text for the separator element between the minimum and maximum inputs.
submitButtonText "Go" The text for the submit button.