search

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.64k stars 658 forks source link

Slider position on drag (android) #150

Closed nithiz closed 10 years ago

nithiz commented 10 years ago

Device: Galaxy S2 - Android 4.1.2

Since your new version the slider position does not (visually) change anymore on touchmove. Only on touchend.

I've seen this is a common problem with sliders etc. on android 4.x devices. The weird thing is that it used to work with your previous version.

leongersen commented 10 years ago

Hmm. Are we talking Android Browser or Chrome for Android?

nithiz commented 10 years ago

Android Browser

leongersen commented 10 years ago

I don't have an android device at hand. Could you please try including the uncompressed file, and removing lines 630 to 638 and 644?

nithiz commented 10 years ago

I tried the following without success:

if ( event.cursor ) {
                /*
                // Prevent the 'I' cursor and extend the range-drag cursor.
                body.css('cursor', $(event.target).css('cursor'));

                // Mark the target with a dragging state.
                if ( Dt.handles.length > 1 ) {
                    Dt.target.addClass(clsList[20]);
                }

                // Prevent text selection when dragging the handles.
                body.on('selectstart' + namespace, function( ){
                    return false;
                });
                */
            }
nithiz commented 10 years ago

Just a second. I think it has to do with the combination of iScroll with noUiSlider. A plain demo seems to work.

leongersen commented 10 years ago

Ok! Is merely including iScroll enough to cause this behaviour, or are there specific combinations that don't work?

nithiz commented 10 years ago

I found the problem. Believe it or not.. the following causes the error:

<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">

Providing either initial-scale, maximum-scale, minimum-scale or user-scalable causes the slider position not to be (visually) updated on android.

So the following does work:

<meta name="viewport" content="width=320">

I still have trouble understanding why it causes it.. but it's a temporary fix for me that will work for the time being.

Thank you for your fast response!

leongersen commented 10 years ago

Is this only true when iScroll is included?

nithiz commented 10 years ago

No, this is my complete testcase:

Does not work:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
    <title></title>
    <link href="jquery.nouislider.css" rel="stylesheet">
</head>
<body>
    <div class="rangeslider"></div>

    <script src="jquery.js"></script>
    <script src="jquery.nouislider.js"></script>
    <script>

    $('.rangeslider').each(function() {

        $(this).noUiSlider({
            range: [0, 10],
            start: 5,
            step: 1,
            handles: 1
        });

    });

    </script>
</body>
</html>

Works:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=320">
    <title></title>
    <link href="jquery.nouislider.css" rel="stylesheet">
</head>
<body>
    <div class="rangeslider"></div>

    <script src="jquery.js"></script>
    <script src="jquery.nouislider.js"></script>
    <script>

    $('.rangeslider').each(function() {

        $(this).noUiSlider({
            range: [0, 10],
            start: 5,
            step: 1,
            handles: 1
        });

    });

    </script>
</body>
</html>
github-actions[bot] commented 2 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.