title: Dynamically adding jQuery's slider
body: <p>I've got a simple upload form to allow for multiple uploads, and for each file selected it needs to create a new slider.</p>
  
  <p>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.</p>
  
  <p>Here's the code that adds the sliders and text boxes:</p>
  
  <pre><code>var pagesslider = $('&lt;div id="pages'+(x + 1)+'" class="pages"&gt;&lt;/div&gt;&lt;input name="anewslider" id="pages-box'+(x + 1)+'" type="text" onchange="$(\'#pages'+(x + 1)+'\').slider({ value: this.value });updatevalues();updatepages(\''+x+'\');" value="1" /&gt;');
  $('#pages-holder').append(pagesslider);
  
  addSlider('pages'+(x + 1));
  </code></pre>
  
  <p>The addSlider function is as follows:</p>
  
  <pre><code>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'));
  }
  </code></pre>
  
  <p>And the slide function is just a simple value change for the text box.</p>
  
  <pre><code>$(element).attr('value', changevalue);
  </code></pre>
  
  <p>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.</p>