ais-range-input

Lets users enter a numeric range for refining search results.

Signature

<ais-range-input
  attribute="string"
  // Optional parameters
  :min="number"
  :max="number"
  :precision="number"
  :class-names="object"
/>

Import

Component

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

Plugin

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.

About this widget

The ais-range-input widget allows a user to select a numeric range using a minimum and maximum input.

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

Vue

<ais-range-input attribute="price" />

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.

Vue

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

class-names · object · default: "{}"

The CSS classes you can override:

• ais-RangeInput. The root of the widget.
• ais-RangeInput--noRefinement. The root of the widget without refinement.
• ais-RangeInput-form. The form wrapper around the inputs and the submit button.
• ais-RangeInput-separator. The separator between the min and the max.
• ais-RangeInput-button. The button that triggers the submission of the form.
• ais-RangeInput-label. The enclosing label of an input.
• ais-RangeInput-input. The inputs.
• ais-RangeInput-input--min. The input for the minimum value.
• ais-RangeInput-input--max. The input for the maximum value.

Vue

<ais-range-input
  [...]
  :class-names="{
    'ais-RangeInput': 'MyCustomRangeInput',
    'ais-RangeInput-form': 'MyCustomRangeInputForm',
    // ...
  }"
/>

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 }. A value that contains the currently applied refinement.

• range: { min: number, max: number }. A value that contains the minimum and maximum available value.

• canRefine: boolean. Whether the refinement can be applied.

• refine: ({ min: number, max: number }) => void. A function to select the refinement.

• sendEvent: (eventType: 'click', facetValue: string) => void. The function to send click events.

  • The view event is automatically sent when the facets are rendered.
  • The click event is automatically sent when refine is called.

  To learn more, see the insights middleware.

Vue

<template>
  <!-- ... -->
  <ais-range-input attribute="price">
    <template
      v-slot="{ currentRefinement, range, canRefine, refine, sendEvent }"
    >
      <input
        type="number"
        :min="range.min"
        :max="range.max"
        :placeholder="range.min"
        :disabled="!canRefine"
        :value="formatMinValue(currentRefinement.min, range.min)"
        @input="
          refine({
            min: $event.currentTarget.value,
            max: formatMaxValue(currentRefinement.max, range.max),
          })
        "
      />
      →
      <input
        type="number"
        :min="range.min"
        :max="range.max"
        :placeholder="range.max"
        :disabled="!canRefine"
        :value="formatMaxValue(currentRefinement.max, range.max)"
        @input="
          refine({
            min: formatMinValue(currentRefinement.min, range.min),
            max: $event.currentTarget.value,
          })
        "
      />
    </template>
  </ais-range-input>
</template>

<script>
export default {
  methods: {
    formatMinValue(minValue, minRange) {
      return minValue !== null && minValue !== minRange ? minValue : "";
    },
    formatMaxValue(maxValue, maxRange) {
      return maxValue !== null && maxValue !== maxRange ? maxValue : "";
    },
  },
};
</script>

minLabel

The slot to override the DOM output for the label of the minimum value.

Vue

<ais-range-input attribute="price">
  <template v-slot:minLabel>Minimum:</template>
</ais-range-input>

maxLabel

The slot to override the DOM output for the label of the maximum value.

Vue

<ais-range-input attribute="price">
  <template v-slot:maxLabel>Maximum:</template>
</ais-range-input>

submitLabel

The slot to override the DOM output for the label of the submit button.

Vue

<ais-range-input attribute="price">
  <template v-slot:submitLabel>Submit</template>
</ais-range-input>

separator

The slot to override the DOM output for the separator beteween the inputs.

Vue

<ais-range-input attribute="price">
  <template v-slot:separator>→</template>
</ais-range-input>

HTML output

HTML

<div class="ais-RangeInput">
  <form class="ais-RangeInput-form">
    <label class="ais-RangeInput-label">
      <input
        class="ais-RangeInput-input ais-RangeInput-input--min"
        type="number"
        placeholder=""
        step="1"
      />
    </label>
    <span class="ais-RangeInput-separator">to</span>
    <label class="ais-RangeInput-label">
      <input
        class="ais-RangeInput-input ais-RangeInput-input--max"
        type="number"
        placeholder=""
        step="1"
      />
    </label>
    <button class="ais-RangeInput-submit" type="submit">
      Go
    </button>
  </form>
</div>