Question

I’ve got a simple upload form to allow for multiple uploads, and for each file selected it needs to create a new slider.

I’ve got it creating a new slider, and they each have individual ID’s. The only problem I am having is I want the slider to input it’s value into a text box each time it slides or is changed. It works fine for a normal slider, not dynamically added, but the dynamically added sliders just don’t update their individual text boxes.

Here’s the code that adds the sliders and text boxes:

var pagesslider = $('<div id="pages'+(x + 1)+'" class="pages"></div><input name="anewslider" id="pages-box'+(x + 1)+'" type="text" onchange="$(\'#pages'+(x + 1)+'\').slider({ value: this.value });updatevalues();updatepages(\''+x+'\');" value="1" />');
$('#pages-holder').append(pagesslider);

addSlider('pages'+(x + 1));

The addSlider function is as follows:

function addSlider(element) {
var slider = $('.pages').slider({
    range: "min",
    value: 1,
    min: 1,
    max: 1000,

    slide: function(event, ui) {
        slide(element, ui.value);
    },
    change: function(event, ui) { 
        slide(element, ui.value);
    }
});
$(element).val(slider.slider('value'));
}

And the slide function is just a simple value change for the text box.

$(element).attr('value', changevalue);

When you manually type a number in the text box, the slider’s position updates – so that works as it should. But it doesn’t work the other way around.
I’m guessing it’s because the slider didn’t load when the page loaded, but I don’t know a fix for it.

Answer 1

So guys.. Turns out it helps if you get the ID’s right.