InstantSearch specs

✏️ edit page

NumericMenu

Widget example

HTML output

<div class="ais-NumericMenu">
  <ul class="ais-NumericMenu-list">
    <li class="ais-NumericMenu-item ais-NumericMenu-item--selected">
      <label class="ais-NumericMenu-label">
        <input class="ais-NumericMenu-radio" type="radio" name="NumericMenu" checked="" />
        <span class="ais-NumericMenu-labelText">All</span>
      </label>
    </li>
    <li class="ais-NumericMenu-item">
      <label class="ais-NumericMenu-label">
        <input class="ais-NumericMenu-radio" type="radio" name="NumericMenu" />
        <span class="ais-NumericMenu-labelText">Less than 500</span>
      </label>
    </li>
  </ul>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-NumericMenu the root div of the widget
.ais-NumericMenu--noRefinement the root div of the widget with no refinement
.ais-NumericMenu-list the list of all refinement items
.ais-NumericMenu-item the refinement list item
.ais-NumericMenu-item--selected the selected refinement list item
.ais-NumericMenu-label the label of each refinement item
.ais-NumericMenu-radio the radio input of each refinement item
.ais-NumericMenu-labelText the label text of each refinement item

Options

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

name default value description
attribute Attribute to apply the filter to
items Array of objects with a label, start and end value. Start and end can individually be left as undefined to only apply a single bound
transformItems Function which receives the items, which will be called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, remove or reorder them

Translations

Note: there are no translations for this widget