UI libraries / Vue InstantSearch / Widgets

ais-range-slider

Signature 
<ais-range-input
  attribute="string"
  // Optional parameters
  :min="number"
  :max="number"
  :precision="number"
/>
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

Since there are many existing third-party range sliders for Vue, none is included by default. However, you can use the default slot in ais-range-input to make a slider. The example here uses Vuetify’s v-range-slider. Make sure you’ve installed the library for your Vue version and are familiar with the API of v-range-slider.

Requirements

The attribute passed to the attribute prop must be added in attributes for faceting, either on the dashboard) or using attributesForFaceting with the API. The values inside attribute must be numbers, not strings.

Examples

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

<template>
  <ais-range-input attribute="price">
    <template v-slot="{ currentRefinement, range, refine }">
      <v-app>
        <v-range-slider
          :min="range.min"
          :max="range.max"
          :value="toValue(currentRefinement, range)"
          @end="refine({ min: $event[0], max: $event[1] })"
          step="1"
          thumb-label
        />
      </v-app>
    </template>
  </ais-range-input>
</template>

<script>
export default {
  methods: {
    toValue(value, range) {
      return [
        typeof value.min === "number" ? value.min : range.min,
        typeof value.max === "number" ? value.max : range.max,
      ];
    },
  },
};
</script>

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.

Use a negative value to round values to powers of 10.

For example, a precision of -2 would round a number to the nearest hundred, while a precision of -3 would round it to the nearest thousand.
Copy 
1
2
3
4
5
6
7
8
9
10
11

<!-- Round values to 2 digits after the decimal point -->
<ais-range-input
  [...]
  :precision="2"
/>

<!-- Round values to the nearest hundred -->
<ais-range-input
  [...]
  :precision="-2"
/>

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 }: the currently applied refinement.
  • range: { min: number, max: number }: the minimum and maximum available value.
  • refine: ({ min: number, max: number }) => void: a function to select the refinement.
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

<template>
  <!-- ... -->
  <ais-range-input attribute="price">
    <template v-slot="{ currentRefinement, range, refine }">
      <v-app>
        <v-range-slider
          :min="range.min"
          :max="range.max"
          :value="toValue(currentRefinement, range)"
          @end="refine({ min: $event[0], max: $event[1] })"
          step="1"
          thumb-label
        />
      </v-app>
    </template>
  </ais-range-input>
  <!-- ... -->
</template>

<script>
export default {
  // ...
  methods: {
    toValue(value, range) {
      return [
        typeof value.min === "number" ? value.min : range.min,
        typeof value.max === "number" ? value.max : range.max,
      ];
    },
  },
};
</script>

HTML output

Copy 
1
2
3

<div class="ais-RangeInput">
  <!-- HTML output of the custom component -->
</div>
Did you find this page helpful?
Vue InstantSearch v4