馃帀 Try the public beta of the new docs site at algolia.com/doc-beta! 馃帀
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鈥檛 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 vue-slider-component (if you鈥檙e using Vue 3, use the vue-slider-component@next version).

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
30
31
32

<template>
  <ais-range-input attribute="price">
    <template v-slot="{ currentRefinement, range, refine }">
      <vue-slider
        :min="range.min"
        :max="range.max"
        :lazy="true"
        :value="toValue(currentRefinement, range)"
        @change="refine({ min: $event[0], max: $event[1] })"
      />
    </template>
  </ais-range-input>
</template>

<script>
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css'

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

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

Number of digits after the decimal point to round values to.
Copy 
1
2
3
4

<ais-range-input
  [...]
  :precision="2"
/>

Customize the UI

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
33
34
35

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

<script>
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css'

export default {
  // ...
  components: {
    VueSlider,
  },
  methods: {
    toValue(value, range) {
      return [
        value.min !== null ? value.min : range.min,
        value.max !== null ? 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