Within my VUE application, I've implemented a range slider component that allows users to view different values as they drag the slider. Everything seems to be functioning correctly, but I've encountered an issue where the mobile version of the page becomes unscrollable due to the VUE slider component. I'm wondering if the browser might be getting confused by the dragging action, mistaking it for a scroll on the entire page instead of just the slider itself. Does anyone have any suggestions on how I can troubleshoot and resolve this problem? Thank you.
<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;
}
}
}