Vue range slider making page not scrollable on mobile

Question

In VUE I have a range slider component that I use to display different values at set point when the user drags the slider. This is all working fine, the only problem that I have is that the slider VUE slider component is making my page not scrollable on mobile. Is the browser getting confused somehow with the drag action, meaning it doesn't know it's happening on the slider but on the actual page? Any ideas how I can solve this? Thanks

<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;
        }
    }
}

set background color on rang slider and test on mobile browser. maybe it fills all of the browser screen — hamid keyhani, Mar 26 '20 at 22:55
@hamidkeyhani Tried that, and the slider doesn't fill all o the browser screen. — Otonel, Mar 27 '20 at 10:26
I also noticed that when the slider is present on the page I can't type into input boxes — Otonel, Mar 27 '20 at 14:31

score 3 · Answer 1 · answered Aug 07 '20 at 22:00

3

This bug already fixed in github repo BUT npm repo not updated. https://github.com/xwpongithub/vue-range-slider/blob/master/src/js/vue-range-slider.js#L1006

So you need remove installed package from npm

"vue-range-component": "^1.0.3",

and add directly from github

"vue-range-component": "xwpongithub/vue-range-slider",

answered Aug 07 '20 at 22:00

yaroslawww

978
9
12

You just saved my life. Thank you – Christopher M. Aug 19 '20 at 05:04
This fix helped me to – Sasha Zoria Apr 02 '21 at 13:47

score 2 · Answer 2 · answered Feb 18 '21 at 14:17

A solution to this problem may be the following. In the created function of Vue where you have this component place the following lines.

created () {
    VueRangeSlider.methods.handleKeyup = ()=> console.log;
    VueRangeSlider.methods.handleKeydown = ()=> console.log;
},

score 1 · Answer 3 · edited Apr 13 '20 at 20:16

1

I also ran into the problem of entering text input fields and the fact that the scroll is blocked on mobile devices.

To solve it, I downloaded the library itself and deleted all the event processing methods and keys (keydown, keyup), this helped with a text input problem. For scrolling, you need to delete the line f = "touchstart"

edited Apr 13 '20 at 20:16

Preston Hager

1,514
18
33

answered Apr 13 '20 at 13:56

Ильшат Зарипов

11
1

score 0 · Answer 4 · answered Feb 08 '21 at 00:03

0

You need to clear the line: x="" and w="" It's, rough, line 73 and 74

answered Feb 08 '21 at 00:03

Иван Гончаренко

109
1
3

Vue range slider making page not scrollable on mobile

4 Answers4