Programatically adding jQuery UI Sliders causing problems

Question

I'm currently adding a div to use as a slider programatically, but when I apply the slider to it, everything appears but I can't drag the handle nor do any of the hover states work correctly.

var container = $('<div class="container"></div>');
var slider_div = $('<div class="position_slider"></div>');

$(slider_div).slider();

container.append(slider_div);
$placeholder = $("#"+player_id);
$placeholder.append(container);

I've tried all number of combinations of adding the slider div to no avail, and I'm just wondering if there's something I don't know about that I've missed. Physically adding a <div class="position_slider"> to the page gets the slider working, but that's not an option.

Any help would be appreciated.

Answer 1

I think this will clear up what this should look like:

var container = '<div class="container"></div>';
var slider_div = '<div class="position_slider"></div>';

$("#"+player_id).append(container);
$(".container").append(slider_div);
$(".position_slider").slider();

I realise that you might want to create many sliders per page, hence the programmatic access, and for that I'd change the class references to ID references and use some kind of counter to create incremental IDs for the controls. I'll leave the actual implementation as an exercise for you.

Answer 2

The problem was to do with jquery.flash altering the container DIV after the slider had been instantiated. I simply changed the order from build slider, append to container, insert flash to build slider, insert flash, append slider.

If you're having trouble whereby you can see the slider and all the ui components, but you can't operate it, try just removing all other jquery from the page apart from that which you need to accomplish the slider, then add it all back in one by one until you discover the gremlin.