В VUE У меня есть компонент ползунка диапазона, который я использую для отображения различных значений в заданной точке, когда пользователь перетаскивает ползунок. Это все работает нормально, единственная проблема, с которой я столкнулся, это то, что компонент слайдера VUE делает мою страницу не прокручиваемой на мобильном телефоне. Не запутался ли браузер с действием перетаскивания, то есть он не знает, что происходит на слайдере, а на реальной странице? Любые идеи, как я могу решить это? Спасибо
<div class='slider margin-top-10 margin-bottom-40'>
<range-slider
v-model="value"
:min="min"
:max="max"
:step="step"
:range="range"
:height="barheight"
:dot-height="dotheight"
:dot-width="dotwidth"
:piecewise-label="label"
:process-style="processstyle">
</range-slider>
</div>
import RangeSlider from 'vue-range-component'
export default {
components: {
RangeSlider
},
props: {
membership: {
type: Object,
},
translations: {
type: Object
},
isAgency: {
type: Boolean
},
clientsCap: {
type: Number
}
},
data: function() {
return {
value: 10,
min: 10,
max: 50,
step: 10,
data: [10, 20, 30, 40, 50,],
range: [{label: '10'}, {label: '20'}, {label: '30'}, {label: '40'}, {label: '50'}],
label: true,
barheight: 3,
dotwidth: 16,
dotheight: 16,
processstyle: { backgroundColor: 'transparent'}
}
},
created: function(){
this.$emit('updateImages', this.value);
},
watch: {
value: function(){
this.$emit('updateImages', this.value);
}
},
computed: {
price: function() {
var price = this.value * this.membership.additional_images;
if(this.isAgency)
price = price * this.clientsCap;
if(this.membership.priceOffered < this.membership.basePrice && this.membership.priceOffered !== undefined)
price = price - (price * 0.10);
return price;
}
}
}