jqm slider stop event not firing - jquery-mobile

Question

I am trying to build a JQM page with a toggle/flip slider that shows/hides txt box based on slider position.
Please see JSfiddle test page.
HTML -
<div data-role="page">
<div data-role="header" data-theme="b">
<label>JQM Slider Toggle test</label>
</div>
<div data-role="container">
<div data-role="fieldcontain">
<label for="OnFront">Device Location:</label>
<select name="OnFront" id="OnFront" data-role="slider" data-theme="b">
<option value="true">Front</option>
<option value="false">Rear</option>
</select>
</div>
<div id="DeviceOnFront">
<div data-role="fieldcontain">
<label for="FrontPosId">Front Position</label>
<input type="text" id="FrontPosId" class="input_txt"></input>
</div>
</div>
<div id="DeviceOnRear" hidden="hidden">
<div data-role="fieldcontain">
<label for="RearPosId">Rear Position</label>
<input type="text" id="RearPosId" class="input_txt"></input>
</div>
</div>
</div>
<div data-role="footer" data-theme="b">
<label>Glyn Lewis</label>
</div>
JS -
$('div[data-role="page"]').bind('pageinit', function () {
// debug test to see if events are firing ???
$("#OnFront").on("start", function () {
alert("User has started sliding my-slider!");
});
$("#OnFront").on("stop", function (event) {
var value = event.target.value;
alert("User has finished sliding my slider, its value is: " + value);
});
// code for changing which txt box is shown
// based on toggle/flip switch
$("#OnFront").on("stop", function (event) {
var value = event.target.value;
if (value == true) {
$("#DeviceOnFront").show();
$("#DeviceOnRear").hide();
} else {
$("#DeviceOnFront").hide();
$("#DeviceOnRear").show();
};
});
};
I am unable to get the slider "stop" event to fire ??
Any pointers would be gratefully accepted.

Answer 1

Here's a working solution made from your example: http://jsfiddle.net/Gajotres/AWyXq/
You had few error's. Events sliderstop and sliderstart don't exist:
$("#OnFront").on("sliderstart", function () {
alert("User has started sliding my-slider!");
});
their correct names are slidestart and slidestop:
$('#OnFront').on('slidestart', function(){
console.log('Start');
});