numericMenu

Signature

numericMenu({
  container: string | HTMLElement,
  attribute: string,
  items: object[],
  // Optional parameters
  templates?: object,
  cssClasses?: object,
  transformItems?: function,
});

Import

import { numericMenu } from "instantsearch.js/es/widgets";

const { numericMenu } = instantsearch.widgets;
// or directly use instantsearch.widgets.numericMenu()

See this widget in action

Preview this widget and its behavior.

The numericMenu widget displays a list of numeric filters in a list. Those numeric filters are pre-configured when creating the widget.

Requirements

The value provided to the attribute option must be an attribute which is a number in the , not a string.

Examples

JavaScript

numericMenu({
  container: "#numeric-menu",
  attribute: "price",
  items: [
    { label: "All" },
    { label: "Less than 500$", end: 500 },
    { label: "Between 500$ - 1000$", start: 500, end: 1000 },
    { label: "More than 1000$", start: 1000 },
  ],
});

Options

container

string | HTMLElement

required

The CSS Selector or HTMLElement to insert the widget into.

numericMenu({
  // ...
  container: "#numeric-menu",
});

numericMenu({
  // ...
  container: document.querySelector("#numeric-menu"),
});

attribute

string

required

The name of the attribute in the record.

JavaScript

numericMenu({
  // ...
  attribute: "price",
});

items

object[]

required

A list of all the options to display, with:

label: string. Label of the option.
start: number. The option must be greater than or equal to start (lower bound).
end: number. The option must be smaller than or equal to end (upper bound).

JavaScript

numericMenu({
  // ...
  items: [
    { label: "All" },
    { label: "Less than 500$", end: 500 },
    { label: "Between 500$ - 1000$", start: 500, end: 1000 },
    { label: "More than 1000$", start: 1000 },
  ],
});

templates

object

The templates to use for the widget.

JavaScript

numericMenu({
  // ...
  templates: {
    // ...
  },
});

cssClasses

object

default:"{}"

The CSS classes you can override:

root. The root element of the widget.
noRefinementRoot. Container class without results.
list. The list of results.
item. The list items.
selectedItem. The selected item in the list.
label. The label of each item.
labelText. The text element of each item.
radio. The radio button of each item.

JavaScript

numericMenu({
  // ...
  cssClasses: {
    root: "MyCustomNumericMenu",
    list: ["MyCustomNumericMenuList", "MyCustomNumericMenuList--subclass"],
  },
});

transformItems

function

default:"items => items"

A function that receives the list of items before they are displayed. It should return a new array with the same structure. Use this to transform, filter, or reorder the items.The function also has access to the full results data, including all standard response parameters and parameters from the helper, such as disjunctiveFacetsRefinements.

JavaScript

numericMenu({
  // ...
  transformItems(items) {
    return items.map((item) => ({
      ...item,
      label: item.label.toUpperCase(),
    }));
  },
});

// or: combined with results
numericMenu({
  // ...
  transformItems(items, { results }) {
    return items.map((item) => ({
      ...item,
      label:
        item.isRefined && results
          ? `${item.label} (${results.nbHits} hits)`
          : item.label,
    }));
  },
});

Templates

You can customize parts of a widget’s UI using the Templates API. Each template includes an html function, which you can use as a tagged template. This function safely renders templates as HTML strings and works directly in the browser—no build step required. For details, see Templating your UI.

The html function is available in InstantSearch.js version 4.46.0 or later.

item

string | function

The template for each item. It exposes:

attribute: string. The name of the attribute.
label: string. The label for the option.
value: string. The encoded URL of the bounds object with a {start, end} form. This value can be used verbatim in the webpage and can be read by refine directly. If you want to inspect the value, you can do JSON.parse(window.decodeURI(value)) to get the object.
isRefined: boolean. Whether the refinement is selected.
url: string. The URL with the applied refinement.
cssClasses: object. The CSS classes provided to the widget.

numericMenu({
  // ...
  templates: {
    item(data, { html }) {
      return html` <label class="${data.cssClasses.label}">
        <input
          type="radio"
          class="${data.cssClasses.radio}"
          name="${data.attribute}"
          ${data.isRefined ? " checked" : ""}
        />
        <span class="${data.cssClasses.labelText}"> ${data.label} </span>
      </label>`;
    },
  },
});

// String-based templates are deprecated, use functions instead.
numericMenu({
  // ...
  templates: {
    item: `
      <label class="{{cssClasses.label}}">
        <input
          type="radio"
          class="{{cssClasses.radio}}"
          name="{{attribute}}"
          {{#isRefined}} checked{{/isRefined}}
        />
        <span class="{{cssClasses.labelText}}">
          {{label}}
        </span>
      </label>`,
  },
});

HTML output

HTML

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

Customize the UI with `connectNumericMenu`

If you want to create your own UI of the numericMenu widget, you can use connectors. To use connectNumericMenu, you can import it with the declaration relevant to how you installed InstantSearch.js.

import { connectNumericMenu } from "instantsearch.js/es/connectors";

const { connectNumericMenu } = instantsearch.connectors;
// or directly use instantsearch.connectors.connectNumericMenu()

Then it’s a 3-step process:

JavaScript

// 1. Create a render function
const renderNumericMenu = (renderOptions, isFirstRender) => {
  // Rendering logic
};

// 2. Create the custom widget
const customNumericMenu = connectNumericMenu(renderNumericMenu);

// 3. Instantiate
search.addWidgets([
  customNumericMenu({
    // instance params
  }),
]);

Create a render function

This rendering function is called before the first search (init lifecycle step) and each time results come back from Algolia (render lifecycle step).

JavaScript

const renderNumericMenu = (renderOptions, isFirstRender) => {
  const { items, canRefine, refine, sendEvent, createURL, widgetParams } =
    renderOptions;

  if (isFirstRender) {
    // Do some initial rendering and bind events
  }

  // Render the widget
};

Rendering options

items

object[]

The list of available options, with each option:

label: string. The label for the option.
value: string. The encoded URL of the bounds object with the {start, end} form. This value can be used verbatim in the webpage and can be read by refine directly. If you want to inspect the value, you can do JSON.parse(window.decodeURI(value)) to get the object.
isRefined: boolean. Whether the refinement is selected.

JavaScript

numericMenu({
  // ...
  templates: {
    item(data, { html }) {
      return html` <label class="${data.cssClasses.label}">
        <input
          type="radio"
          class="${data.cssClasses.radio}"
          name="${data.attribute}"
          ${data.isRefined ? " checked" : ""}
        />
        <span class="${data.cssClasses.labelText}"> ${data.label} </span>
      </label>`;
    },
  },
});

canRefine

boolean

Whether the search can be refined. This is true if there are results or if a range other than “All” is selected.

JavaScript

const renderNumericMenu = (renderOptions, isFirstRender) => {
  // `canRefine` is only available from v4.45.0
  // Use `hasNoResults` in earlier minor versions.
  const { items, canRefine } = renderOptions;

  document.querySelector("#numeric-menu").innerHTML = `
    <ul>
      ${items
        .map(
          (item) => `
            <li>
              <label>
                <input
                  type="radio"
                  name="price"
                  value="${item.value}"
                  ${item.isRefined ? "checked" : ""}
                  ${!canRefine ? "disabled" : ""}
                />
                ${item.label}
              </label>
            </li>`,
        )
        .join("")}
    </ul>
  `;
};

refine

function

Sets the selected value and triggers a new search.

JavaScript

const renderNumericMenu = (renderOptions, isFirstRender) => {
  const { items, refine } = renderOptions;

  const container = document.querySelector("#numeric-menu");

  container.innerHTML = `
    <ul>
      ${items
        .map(
          (item) => `
            <li>
              <label>
                <input
                  type="radio"
                  name="price"
                  value="${item.value}"
                  ${item.isRefined ? "checked" : ""}
                />
                ${item.label}
              </label>
            </li>`,
        )
        .join("")}
    </ul>
  `;

  [...container.querySelectorAll("input")].forEach((element) => {
    element.addEventListener("change", (event) => {
      refine(event.currentTarget.value);
    });
  });
};

sendEvent

(eventType, facetValue) => void

The function to send click events. The click event is automatically sent when refine is called. To learn more, see the insights middleware.

eventType: 'click'
facetValue: string

JavaScript

// For example,
sendEvent("click", [10, 20]);

/*
  A payload like the following will be sent to the `insights` middleware.
  {
    eventType: 'click',
    insightsMethod: 'clickedFilters',
    payload: {
      eventName: 'Filter Applied',
      filters: ['numerics<=20', 'numerics>=10'],
      index: '',
    },
    widgetType: 'ais.numericMenu',
  }
*/

createURL

function

Generates a URL for the next state.

JavaScript

const renderNumericMenu = (renderOptions, isFirstRender) => {
  const { items, createURL } = renderOptions;

  document.querySelector("#numeric-menu").innerHTML = `
    <ul>
      ${items
        .map(
          (item) => `
            <li>
              <a href="${createURL(item.value)}">${item.label}</a>
            </li>`,
        )
        .join("")}
    </ul>
  `;
};

All original widget options forwarded to the render function.

JavaScript

const renderNumericMenu = (renderOptions, isFirstRender) => {
  const { widgetParams } = renderOptions;

  widgetParams.container.innerHTML = "...";
};

// ...

search.addWidgets([
  customNumericMenu({
    // ...
    container: document.querySelector("#numeric-menu"),
  }),
]);

First, create your custom widgets using a rendering function. Then, instantiate them with parameters. There are two kinds of parameters you can pass:

Instance parameters. Predefined options that configure Algolia’s behavior.
Custom parameters. Parameters you define to make the widget reusable and adaptable.

Inside the renderFunction, both instance and custom parameters are accessible through connector.widgetParams.

JavaScript

const customNumericMenu = connectNumericMenu(
  renderNumericMenu
);

search.addWidgets([
  customNumericMenu({
    attribute: string,
    items: object[],
    // Optional parameters
    transformItems?: function,
  })
]);

Instance options

attribute

string

required

The name of the attribute in the record.

JavaScript

customNumericMenu({
  // ...
  attribute: "price",
});

items

object[]

required

A list of all the options to display, with:

label: string. Label of the option.
start: string. The option must be greater than or equal to start (lower bound).
end: string. The option must be smaller than or equal to end (upper bound).

JavaScript

customNumericMenu({
  // ...
  items: [
    { label: "All" },
    { label: "Less than 500$", end: 500 },
    { label: "Between 500$ - 1000$", start: 500, end: 1000 },
    { label: "More than 1000$", start: 1000 },
  ],
});

transformItems

function

default:"items => items"

JavaScript

customNumericMenu({
  // ...
  transformItems(items) {
    return items.map((item) => ({
      ...item,
      label: item.label.toUpperCase(),
    }));
  },
});

// or: combined with results
customNumericMenu({
  // ...
  transformItems(items, { results }) {
    return items.map((item) => ({
      ...item,
      label:
        item.isRefined && results
          ? `${item.label} (${results.nbHits} hits)`
          : item.label,
    }));
  },
});

Full example

<div id="numeric-menu"></div>

// Create the render function
const renderNumericMenu = (renderOptions, isFirstRender) => {
  // `canRefine` is only available from v4.45.0
  // Use `hasNoResults` in earlier minor versions.
  const { items, canRefine, refine, widgetParams } = renderOptions;

  widgetParams.container.innerHTML = `
    <ul>
      ${items
        .map(
          (item) => `
            <li>
              <label>
                <input
                  type="radio"
                  name="${widgetParams.attribute}"
                  value="${item.value}"
                  ${item.isRefined ? "checked" : ""}
                  ${!canRefine ? "disabled" : ""}
                />
                ${item.label}
              </label>
            </li>`,
        )
        .join("")}
    </ul>
  `;

  [...widgetParams.container.querySelectorAll("input")].forEach((element) => {
    element.addEventListener("change", (event) => {
      refine(event.currentTarget.value);
    });
  });
};

// Create the custom widget
const customNumericMenu = connectNumericMenu(renderNumericMenu);

// Instantiate the custom widget
search.addWidgets([
  customNumericMenu({
    container: document.querySelector("#numeric-menu"),
    attribute: "price",
    items: [
      { label: "All" },
      { label: "Less than 500$", end: 500 },
      { label: "Between 500$ - 1000$", start: 500, end: 1000 },
      { label: "More than 1000$", start: 1000 },
    ],
  }),
]);

Import

See this widget in action

About this widget

Requirements

Examples

Options

Templates

HTML output

Customize the UI with `connectNumericMenu`

Create a render function

Rendering options

Create and instantiate the custom widget

Instance options

Full example

​Import

See this widget in action

​About this widget

​Requirements

​Examples

​Options

​Templates

​HTML output

​Customize the UI with connectNumericMenu

​Create a render function

​Rendering options

​Create and instantiate the custom widget

​Instance options

​Full example

Import

About this widget

Requirements

Examples

Options

Templates

HTML output

Customize the UI with `connectNumericMenu`

Create a render function

Rendering options

Create and instantiate the custom widget

Instance options

Full example