gistfile1.vue

<template>
  <div :class="bem()" v-show="show">

    <slot name="header"></slot>

    <vue-slider ref="slider" v-model="sliderValue" v-on:drag-end="sliderUpdated()" :min="0" :max="100" width="100%" :clickable="false"></vue-slider>

    <slot name="footer"></slot>

  </div>
</template>

<script>

import { Component } from 'vue-instantsearch';
import vueSlider from 'vue-slider-component';

export default {
  mixins: [Component],
  components: {
    vueSlider
  },
  data() {
    return {
      blockClassName: 'ais-distance-range',
      sliderValue: 100
    };
  },
  computed: {
    show() {
      return this.distance || this.searchStore.totalResults > 0;
    },
    distance: {
      get() {
        return this.searchStore.queryParameters.aroundRadius;
      },
      set(rawValue) {
        const value = Number(rawValue);

        this.searchStore.stop();
        this.searchStore.queryParameters.aroundRadius = value;
        this.searchStore.start();
        this.searchStore.refresh();
      },
    },
  },
  methods: {
    sliderUpdated: function() {
      this.distance = this.sliderValue;
    }
  },
  mounted() {
    this.$refs.slider.refresh();
  },
};
</script>