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

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

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>
⌘I