Question

Do someone know; how to handle touchstart and touchend events on jquery mobile’s slider?
I can only handle change and start event but couldn’t find a solution for touchend.

My goal is to block tracing the slider changes when not being touched.

Any help will be very appreciated.
Thanks,

My codes:

HTML:

<input type="range" name="slider" id="slider" class="slider" value="1000" min="500" max="20000" data-highlight="true" data-mini="true" />

JS:

starts tracing after being touched (will keep tracing):

$('#slider').next().children('a').bind('taphold', function () {
    $('#slider').live("change", function (event, ui) {
    //do some stuff here...
    });
});

always trace:

 $('#slider').live("change", function (event, ui) {
    //do some stuff here...
    });

stop tracing after touch ends:

??? I have to stop tracing somehow

Answer 1

What about using vmouseup. As it’s stated in the doc, it’s the event you have to use to handle touchend or mouseup events.

You could combine that with the use of unbind to achieve your goal no?

EDIT:

I just tested with chrome and the following

$('#slider').next().children('a').bind('taphold', function() {
    console.log("bind");
    $('#slider').bind("change", function(event, ui) {
        console.log(this.value);
    });
});

$('#slider').next().children('a').bind('vmouseup', function() {
    console.log("unbind");
    $('#slider').unbind("change")
});

works exactly as expected. In the console I get a “bind” when I do a taphold (that is a long clic on a laptop) and then every move outputs the value. When I release my mouse I get an “unbind” and then sliding whithout holding still beforehand does not output the value (no output either if the value is changed thru the slider box).