JQuery Mobile Slider is being viewed as a Swipe Event

Question

I'm building an assessment tool in JQuery Mobile that uses sliders. I have everything in one file with multiple div's to separate each page. I have a script that allows for swipe left and right. Because the script doesn't differentiate when the user is swiping versus using the slider, it flips to the next page as they adjust the slider.

I want the user to be able to swipe to the next page, but not when they're adjusting the slider. Any suggestions?? Here is the swipe event:

<script type="text/javascript">
        $('div.ui-page').live("swipeleft", function(){
            var nextpage = $(this).next('div[data-role="page"]');
            if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide"}, false, true);
            }
        });

        $('div.ui-page').live("swiperight", function(){
            var prevpage = $(this).prev('div[data-role="page"]');
            if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide",
            reverse: true}, true, true);
            }
        });
</script>

Here is the slider and page:

<div data-role="page">
        <h2>I can react quickly</h2>
        <input type="range" name="strength" id="strength" data-highlight="true" min="0" max="10" value="0">
</div>

I'd really appreciate any help or suggestions!!

Answer 1

You can use closest() to check if the event target element is not inside a slider widget when handling the swipe gestures:

$("div.ui-page").live("swipeleft", function(e) {
    if (!$(e.target).closest(".ui-slider, .ui-slider-track").length) {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide"}, false, true);
        }
    }
});

Note that live() has been deprecated in favor of on() since jQuery 1.7 and was removed in jQuery 1.9, so it would be better to write:

$(document).on("swipeleft", "div.ui-page", function(e) {
    if (!$(e.target).closest(".ui-slider, .ui-slider-track").length) {
        // ...
    }
});