API Reference / Vue InstantSearch / ais-range-input

ais-range-input

A
Signature 
<ais-range-input
  attribute="string"
  // Optional parameters
  :min="number"
  :max="number"
  :precision="number"
  :class-names="object"
/>
See code examples
See live example

About this widget # A

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

Copy 
1

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

Props # A

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 to 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 # A

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

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