ais-range-slider

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
  },
  // ...
};

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

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:

Install Vuetify 2
API reference for v-range-slider

For Vue 3:

Install Vuetify 3+
API reference for v-range-slider

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>

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

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

​Import

See this widget in action

​About this widget

​Requirements

​Examples

​Props

​Customize the UI

​HTML output

Import

About this widget

Requirements

Examples

Props

Customize the UI

HTML output