You found exactly the same problem as I a week ago. jQMobile although swore they work on top of jQuery UI, this is not the case whatsoever.Turns out, jQuery mobile widgets just looks like UI widgets, but do not follow same UI concept of providing an interface for control like specific hooks and properties except for specific html attributes which is IMHO pretty far away from useful and potentially harming html markup.
–
Ivan HušnjakJan 3 '11 at 9:32

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.

It's a great solution, thank you for the help Ivan! I would love to have the full control in JQMobile just like we have in JQueryUI :) - P.S. You don't need $('#' + id).slider(); if you use the normal jQuery Mobile code as the simple input <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
–
balexandreJan 3 '11 at 11:03

I know I don't need .slider() invoked, but this is code I'm still working on... f.i. I still don't use jQMobile pages etc...
–
Ivan HušnjakJan 3 '11 at 11:35

I found out that there's some issues in using Ivan's solution. If you drag the slider, pause for a while (not lifting the mouse button) and keep on dragging the slider the taphold -event won't be triggered anymore.

By adding the vmouseup and mouseup events in to the slider div you get an improvement but the slider still fails to trigger the event if the mouse cursor is moved away from above the slider.

Based on @VTWood's solution; here's a generic 'fix' for all jQuery-Mobile 1.1 sliders so they dispatch start and stop events at the appropriate times. You just need to drop this code into your page once to patch up all future sliders.

In a nutshell, it binds an event listener to the document object which listens for both mousedown and touchstart events triggered from .ui-slider elements. Once triggered the handler function will find the input element which sits alongside the .ui-slider control that was clicked and trigger a start event. You can consume this like so:

If you want to just catch the event when the slider is released (most probably to optimize ajax requests).

This worked for me:

var slider = $('#my_slider');
//as the answer from @nskeskin you have to remove the type range from your input on the html code
slider.slider({create:function(){
//maybe this is too much hacking but until jquery provides a reference to this...
$(this).next().children('a').bind('vmouseup', yourOnChangeCallback);
}
});

Also this prevents that you add events when the control is not yet initialized (or created), so waiting for the create event is a bit more correct I think.