nouislider 2 handles, application bug using android and iOS emulators

Good day, I hope all is well. I had been using nouislider.js for a hybrid mobile application I am working on. Everything looked great, worked well, when tested locally in my web browser.

As soon as I put it into an emulator though (ripple) for both android and iOS, the multi-handle functionality breaks. You can move either the lower or the upper handle in whichever order and at first it appears to work, but as soon as you touch the second handle, they both occupy the same space/value.

For example, if I have a range of 0-100, lower handle defaulted to 20 and upper handle defaulted to 80, I can move either one of them to whatever value. As soon as I touch the second handle though (doesn’t matter which), the first handle always jumps to the same value as the second one I interfaced with.

To elaborate, if I move lower handle to, say, value 30. As soon as I move the upper handle to value 70 or whatever the case may be, the first handle then becomes value 70 as well. Now they both share the same value and slide atop one another.

I created a separate installation where all that is in the install is just the includes for the js/css and the html for the slider and it still has this behavior.

var slider = document.getElementById('slider');
noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

<div id="slider"></div>

This is the code that is producing that behavior (ripple emulator) for both iOS and Android.

[gitlovenotwar]

This issue still persist till today for mobile devices

[dalegrebey]

When I have the results, I will be sure to post them. It may be a few days, but I will post them.