Skip to main content
Signature
<ais-range-input
  attribute="string"
  // Optional parameters
  :min="number"
  :max="number"
  :precision="number"
/>

​
Import

  • Component
  • Plugin
To ensure optimal bundle sizes, see Optimize build size.
Vue
import { AisRangeInput } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

export default {
  components: {
    AisRangeInput
  },
  // ...
};
View demo

​
About this widget

Since there are many 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. For Vue 2: For Vue 3:

​
Requirements

The attribute provided to the widget must be in attributes for faceting, either on the dashboard or using the attributesForFaceting parameter with the API. The values of the attribute must be numbers, not strings.

​
Examples

<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

​
attribute
string
required
The name of the attribute in the record.
Vue
<ais-range-input attribute="price" />
​
min
number
The minimum value for the input. When not provided, the minimum value is automatically computed by Algolia from the data in the index.
Vue
<ais-range-input
  [...]
  :min="10"
/>
​
max
number
The maximum value for the input. When not provided, the maximum value is automatically computed by Algolia from the data in the index.
Vue
<ais-range-input
  [...]
  :max="500"
/>
​
precision
number
default:0
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.
Vue
<!-- 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

​
default
The slot to override the complete DOM output of the widget.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.
<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

HTML
<div class="ais-RangeInput">
  <!-- HTML output of the custom component -->
</div>
⌘I