API Reference / Vue InstantSearch Widgets / ais-range-slider
Apr. 24, 2019

ais-range-slider

Widget signature 
<ais-range-input
  attribute="string"
  // Optional parameters
  :min="number"
  :max="number"
  :precision="number"
/>
See code examples
See Live example

About this widget

The ais-range-slider allows a user to select a numeric range using a slider with two handles.

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

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">
    <div slot-scope="{ 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] })"
      />
    </div>
  </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>

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.

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">
    <div slot-scope="{ currentRefinement, range, refine }">
      <vue-slider
        :min="range.min"
        :max="range.max"
        :lazy="true"
        :value="toValue(currentRefinement, range)"
        @input="refine({ min: $event[0], max: $event[1] })"
      />
    </div>
  </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 v2