API Reference / Vue InstantSearch Widgets / ais-numeric-menu

ais-numeric-menu

Widget signature 
<ais-numeric-menu
  attribute="string"
  :items="object[]"
  // Optional parameters
  :transform-items="function"
  :class-names="object"
/>
See code examples
See Live example

About this widget

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

Requirements

The values inside the attribute must be numbers, not strings.

Examples

Copy 
1
2
3
4
5
6
7
8
9
10

<ais-numeric-menu
  attribute="price"
  :items="[
    { label: 'All' },
    { label: '<= 10$', end: 10 },
    { label: '10$ - 100$', start: 10, end: 100 },
    { label: '100$ - 500$', start: 100, end: 500 },
    { label: '>= 500$', start: 500 },
  ]"
/>

Props

attribute
type: string
Required

The name of the attribute in the record.
Copy 
1
2
3
4

<ais-numeric-menu
  [...]
  attribute="price"
/>
items
type: object[]
Required

A list of all the options to display, with:

  • label: string: the label of the option.
  • start: number: the lower bound of the option (\>=).
  • end: number: the higher bound of the option (\<=).
Copy 
1
2
3
4
5
6
7
8
9
10

<ais-numeric-menu
  [...]
  :items="[
    { label: 'All' },
    { label: '<= 10$', end: 10 },
    { label: '10$ - 100$', start: 10, end: 100 },
    { label: '100$ - 500$', start: 100, end: 500 },
    { label: '>= 500$', start: 500 },
  ]"
/>
transform-items
type: function
default: items => items
Optional

Modifies the items being displayed, for example, to filter or sort them. It takes items as argument and expects them back in return.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<template>
  <!-- ... -->
  <ais-numeric-menu
    [...]
    :transform-items="transformItems"
  />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.map(item => ({
          ...item,
          label: item.label.toUpperCase(),
        }));
      },
    },
  };
</script>
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-NumericMenu: the root element of the widget.
  • ais-NumericMenu--noRefinement: the root element of the widget without refinement.
  • ais-NumericMenu-list: the ranges list.
  • ais-NumericMenu-item: the ranges list item.
  • ais-NumericMenu-item--selected: the ranges list selected item.
  • ais-NumericMenu-label: the label of each item.
  • ais-NumericMenu-radio: the radio of each item.
  • ais-NumericMenu-labelText: the text of each item.
Copy 
1
2
3
4
5
6
7
8

<ais-numeric-menu
  [...]
  :class-names="{
    'ais-NumericMenu': 'MyCustomNumericMenu',
    'ais-NumericMenu-list': 'MyCustomNumericMenuList',
    // ...
  }"
/>

Customize the UI

default

The slot to override the complete DOM output of the widget.

Scope

  • items: object[]: the list of items the widget can display.
  • canRefine: boolean: whether or not a refinement can be applied.
  • refine: (value: string) => void: the function to call with the next value of the refinement.
  • createURL: (value: string) => void: the function to generate a URL for the provided refinement.
  • sendEvent: (eventType: 'click', facetValue: string) => void: the function to send click events.
    • The view event is automatically sent when the facets are rendered.
    • The click event is automatically sent when refine is called.
    • You can learn more about the insights middleware.

With each item an object with:

  • 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 or not the refinement is selected.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ais-numeric-menu
  attribute="price"
  :items="[
    { label: 'All' },
    { label: '<= 10$', end: 10 },
    { label: '10$ - 100$', start: 10, end: 100 },
    { label: '100$ - 500$', start: 100, end: 500 },
    { label: '>= 500$', start: 500 },
  ]"
>
  <ul slot-scope="{ items, refine, createURL, sendEvent }">
    <li v-for="item in items" :key="item.value">
      <a
        :href="createURL(item.value)"
        :style="{ fontWeight: item.isRefined ? 'bold' : '' }"
        @click.prevent="refine(item.value)"
      >
        {{ item.label }}
      </a>
    </li>
  </ul>
</ais-numeric-menu>

HTML output

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

Did you find this page helpful?

Vue InstantSearch v3