Dynamically adding jQuery's slider [closed]

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

the simplest method to add any new jquery slider dynamicaly is:

var fieldvalue = '<input type="range" name="loan_term" class="textbox" id="my_new_slider" min="12" max="36" step="12" value="24" />';

$('#divelement').html(fieldvalue);

$("#my_new_slider").rangeinput({
     progress: true
});

i hope it helps others