leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.7k stars 657 forks source link

Weird behaviour and handles moving together on some mobile devices #1255

Open CsakiTheWorking opened 1 year ago

CsakiTheWorking commented 1 year ago

I have an Android app with a webView in it and one of my testers who has some kind of Huawei device has a problem using the slider (see video below). I couldn't reproduce the bug on either of my devices. I tried it on Pixel, Samsung, iPhone, iPhone simulator and desktop, but it works fine for me. What could be the problem and is there anything I can do on my end to fix this? Maybe adding a margin so the handles won't jump together that much, but it's still weird. (The problem appears on a Huawei device, so maybe the reason is the absence of Chrome?)

Here's the code snippet about how I create the slider:

            sliderElement = document.getElementById(sliderDiv);
            ProductList.slider = noUiSlider.create(sliderElement, {
                start: [sliderData.min, sliderData.max],
                connect: true,
                range: {
                    'min': sliderData.min,
                    'max': sliderData.max
                }
            });
            ProductList.slider.on('change', function() {
                sliderResult = ProductList.slider.get();
                sliderMin = parseInt(sliderResult[0]);
                sliderMax = parseInt(sliderResult[1]);
                $('.slider-from').html(sliderMin + '%');
                $('.slider-to').html(sliderMax + '%');
                ProductList.search();
            });

https://github.com/leongersen/noUiSlider/assets/106559675/ae9de393-5c5f-468c-be3f-e6889172c622

CsakiTheWorking commented 1 year ago

I didn't change the code above because I only have access to the app, not the web part. I implemented a timer in the app which checks if the slider's handles are too close and puts them apart. After a little fiddling I've successfully reproduced the problem. When I try to move a slider, both of them are moving.

leongersen commented 1 year ago

This isn't something I've seen before. Do you have any indication what the webview on this device is?