UI libraries / Vue InstantSearch / Widgets

ais-range-input

Signature 
<ais-range-input
  attribute="string"
  // Optional parameters
  :min="number"
  :max="number"
  :precision="number"
  :class-names="object"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

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

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

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-range-input widget allows a user to select a numeric range using a minimum and maximum input.

Requirements

The attribute provided to the widget must be present in “Attributes for faceting” on the Algolia dashboard) or configured as attributesForFaceting via a set settings call to the Algolia API. The values inside the attribute must be numbers, not strings.

Examples

Copy 
1

<ais-range-input attribute="price" />

Props

Parameter Description
attribute
type: string
Required

The name of the attribute in the record.
Copy 
1

<ais-range-input attribute="price" />
min
type: number
Optional

The minimum value for the input. When not provided, the minimum value is automatically computed by Algolia from the data in the index.
Copy 
1
2
3
4

<ais-range-input
  [...]
  :min="10"
/>
max
type: number
Optional

The maximum value for the input. When not provided, the maximum value is automatically computed by Algolia from the data in the index.
Copy 
1
2
3
4

<ais-range-input
  [...]
  :max="500"
/>
precision
type: number
default: 0
Optional

The number of digits after the decimal point to use.
Copy 
1
2
3
4

<ais-range-input
  [...]
  :precision="2"
/>
class-names
type: object
default: {}
Optional

The CSS classes you can override:

  • ais-RangeInput: the root of the widget.
  • ais-RangeInput--noRefinement: the root of the widget without refinement.
  • ais-RangeInput-form: The form wrapper around the inputs and the submit button.
  • ais-RangeInput-separator: The separator between the min and the max.
  • ais-RangeInput-button: The button that triggers the submission of the form.
  • ais-RangeInput-label: The enclosing label of an input.
  • ais-RangeInput-input: The inputs.
  • ais-RangeInput-input--min: The input for the minimum value.
  • ais-RangeInput-input--max: The input for the maximum value.
Copy 
1
2
3
4
5
6
7
8

<ais-range-input
  [...]
  :class-names="{
    'ais-RangeInput': 'MyCustomRangeInput',
    'ais-RangeInput-form': 'MyCustomRangeInputForm',
    // ...
  }"
/>

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

  • currentRefinement: { min: number, max: number }: a value that contains the currently applied refinement.
  • range: { min: number, max: number }: a value that contains the minimum and maximum available value.
  • canRefine: boolean: whether the refinement can be applied.
  • refine: ({ min: number, max: number }) => void: a function to select the 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.
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<template>
  <!-- ... -->
  <ais-range-input attribute="price">
    <template
      v-slot="{
        currentRefinement,
        range,
        canRefine,
        refine,
        sendEvent,
      }"
    >
      <input
        type="number"
        :min="range.min"
        :max="range.max"
        :placeholder="range.min"
        :disabled="!canRefine"
        :value="formatMinValue(currentRefinement.min, range.min)"
        @input="refine({
          min:$event.currentTarget.value,
          max: formatMaxValue(currentRefinement.max, range.max),
        })"
      >
      →
      <input
        type="number"
        :min="range.min"
        :max="range.max"
        :placeholder="range.max"
        :disabled="!canRefine"
        :value="formatMaxValue(currentRefinement.max,range.max)"
        @input="refine({
          min:formatMinValue(currentRefinement.min, range.min),
          max: $event.currentTarget.value,
        })"
      >
    </template>
  </ais-range-input>
</template>

<script>
  export default {
    methods: {
      formatMinValue(minValue, minRange) {
        return minValue !== null && minValue !== minRange ? minValue : '';
      },
      formatMaxValue(maxValue, maxRange) {
        return maxValue !== null && maxValue !== maxRange ? maxValue : '';
      },
    },
  };
</script>
minLabel

The slot to override the DOM output for the label of the minimum value.
Copy 
1
2
3

<ais-range-input attribute="price">
  <template v-slot:minLabel>Minimum:</template>
</ais-range-input>
maxLabel

The slot to override the DOM output for the label of the maximum value.
Copy 
1
2
3

<ais-range-input attribute="price">
  <template v-slot:maxLabel>Maximum:</template>
</ais-range-input>
submitLabel

The slot to override the DOM output for the label of the submit button.
Copy 
1
2
3

<ais-range-input attribute="price">
  <template v-slot:submitLabel>Submit</template>
</ais-range-input>
separator

The slot to override the DOM output for the separator beteween the inputs.
Copy 
1
2
3

<ais-range-input attribute="price">
  <template v-slot:separator>→</template>
</ais-range-input>

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

<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"
        placeholder=""
        step="1"
      />
    </label>
    <span class="ais-RangeInput-separator">to</span>
    <label class="ais-RangeInput-label">
      <input
        class="ais-RangeInput-input ais-RangeInput-input--max"
        type="number"
        placeholder=""
        step="1"
      />
    </label>
    <button class="ais-RangeInput-submit" type="submit">Go</button>
  </form>
</div>
Did you find this page helpful?
Vue InstantSearch v4