Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.