jQueryMobile: how to work with slider events?
- by balexandre
I'm testing the slider events in jQueryMobile and I must been missing something.
page code is:
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
and if I do:
$("#slider").data("events");
I get
blur, focus, keyup, remove
What I want to do is to get the value once user release the slider handle
and having a hook to the keyup event as
$("#slider").bind("keyup", function() { alert('here'); } );
does absolutely nothing :(
I must say that I wrongly assumed that jQueryMobile used jQueryUI controls as it was my first thought, but now working deep in the events I can see this is not the case, only in terms of CSS Design.
What can I do?
jQuery Mobile Slider source code can be found on Git if it helps anyone as well a test page can be found at JSBin
As I understand, the #slider is the textbox with the value, so I would need to hook into the slider handle as the generated code for this slider is:
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="slider" class="ui-input-text ui-slider" id="slider-label">Input slider:</label>
<input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" />
<div role="application" class="ui-slider ui-btn-down-c ui-btn-corner-all">
<a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-valuetext="54" title="54" aria-labelledby="slider-label" style="left: 54%;">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"></span>
</span>
</a>
</div>
</div>
and checking the events in the handler anchor I get only the click event
$("#slider").next().find("a").data("events");
