jQueryMobile: how to work with slider events?

Question

I\'m testing the slider events in jQueryMobile and I must been missing something.

page code is:

Answer 1

My solution to your problem is to hookup handlers on tap and taphold events. Tap is hooked on div element of slider, while taphold is hooked on a element (slider control button).

HTML markup of slider:

     strop
    

    

        
            
                
            
        
    

JS:

$('#' + id).slider();
$('#' + id).siblings('.ui-slider').bind('tap', function(){ makeAjaxChange($(this).siblings('input')); });
$('#' + id).siblings('.ui-slider a').bind('taphold', function(){ makeAjaxChange($(this).parent().siblings('input')); });

Function makesAjaxChange(elem) makes the update to the server. There is one other thing to note here, changing value in input field does not updates server so you have to bind function to change event of input element. Also you must pay attention that by doing this every slider control move will trigger input element change so you have to workaround that too.

This is why jQuery Mobile is NOT jQuery UI for mobile devices. You dont have these things sorted out and must do them yourself.

I hope this helps.

EDIT: I forgot to explain why tap on div.ui-slider and taphold on a.ui-slider-handle. div.ui-handler tap is for click/tap event when user just clicks or taps a finger on slidebar. a.ui-slider-handle tabhold is after user was moving with mouse or finger left/right down the slidebar and released it.

Ivan