Question

So in my code I create a div as follows, <div id='scrubber'></div>, and later I do the following:

    $('#scrubber').html('<input type="range" name="prog" id="prog" value="0" min="0" max="'+event.jPlayer.status.duration+'"  />');
    $('#scrubber').slider();

This in turn produces 2 sliders. 1 of which is a standard html slider and the other is a jquerymobile slider. I had a simple work around, which was $('#scrubber').hide();, and that hid the plane jane html slider. However, at a different point in the code I need to update the value without user input:

$('#scrubber').val(event.jPlayer.status.currentTime).slider('refresh');

That should work in the theory, however, it just modifies the value for the html slider and NOT the jquery mobile slider. I don’t think slider('refresh') is doing anything at all. Am I missing something? Did something change?

Answer 1

Try this to create a JQM slider:

$('#scrubber').html('<input type="range" name="prog" id="prog" value="0" min="0" max="'+event.jPlayer.status.duration+'"/>').trigger("create");

Hope this helps