API Reference / Vue InstantSearch Widgets / ais-range-input

ais-range-input

Widget 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

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

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

default

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

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 or not 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">
    <form
      slot-scope="{
        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,
        })"
      >
    </form>
  </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">
  <span slot="minLabel">Minimum:</span>
</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">
  <span slot="maxLabel">Maximum:</span>
</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">
  <span slot="submitLabel">Submit</span>
</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">
  <span slot="separator">→</span>
</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 v3