API Reference / Vue InstantSearch / ais-range-slider

ais-range-slider

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

About this widget # A

Since there are many existing third-party range sliders for Vue, we didn’t include one by default. However, you can use the default slot in ais-range-input to make a slider. The example here uses vue-slider-component.

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

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

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

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

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

Copy 
1
2
3

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