UI libraries / Vue InstantSearch / Widgets

ais-numeric-menu

Signature 
<ais-numeric-menu
  attribute="string"
  :items="object[]"
  // Optional parameters
  :transform-items="function"
  :class-names="object"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

import { AisNumericMenu } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisNumericMenu
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

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

Parameter Description
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: 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).
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

Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. Useful for transforming, removing, or reordering items.

In addition, the full results data is available, which includes all regular response parameters, as well as parameters from the helper (for example disjunctiveFacetsRefinements).
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
26
27
28
29
30

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

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.map(item => ({
          ...item,
          label: item.label.toUpperCase(),
        }));
      },

      /* or, combined with results */
      transformItems(items, { results }) {
        return items.map(item => ({
          ...item,
          label: item.isRefined && results
            ? `${item.label} (${results.nbHits} hits)`
            : item.label,
        }));
      },
    },
  };
</script>
class-names
type: object
default: {}
Optional

The CSS classes you can 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

Parameter Description
default

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

Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

Scope

  • items: object[]: the list of items the widget can display.
  • canRefine: boolean: whether 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 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
23
24

<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 },
  ]"
>
  <template v-slot="{ items, refine, createURL, sendEvent }">
    <ul>
      <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>
  </template>
</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 v4