title: noUiSlider: Create multiple
body: <p>I'm using noUiSlider (<a href="http://refreshless.com/nouislider/" rel="nofollow noreferrer">http://refreshless.com/nouislider/</a>) on a form which will have dozens of sliders on it. Rather than copy/pasting the code for each, I thought I could just set up an array of class names and a loop. That works; ie, it sets up working sliders. However the form also has to show the value of a slider upon update, and that's the part that I can't work out. I know how to do it with a static value but not in the loop ...</p>
  <p>Simplified example:</p>
  <p>JavaScript:</p>
  <pre><code>var steps = [
      'Never',
      'Occasionally',
      'Frequently',
      'Constant'
  ];
  // This array will have many more
  var slider_names = [
      'slider',
      'slider2'
  ];
  var sliders = [];
  
  for (var i = 0; i &lt; slider_names.length; i++) {
      sliders.push(document.getElementById(slider_names[i]));
      noUiSlider.create(sliders[i], {
          start: 0,
          connect: 'lower',
          step: 1,
          range: {
              'min': [ 0 ],
              'max': [ 3 ]
          },
          pips: {
              mode: 'steps',
              density: 100
          }
      });
      sliders[i].noUiSlider.on('update', function(values, handle) {
  // ***** Problem line *****
          document.getElementById(slider_names[i]+'-value').innerHTML = steps[parseInt(values[handle])];
  // ***** Problem line *****
      });
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;slider-value&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;slider&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;slider2-value&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;slider2&quot;&gt;&lt;/div&gt;  (etc...)
  </code></pre>
  <p>The problem line is highlighted above ... when using a static value (ex, 'slider2-value') it works fine, but I can't seem to figure out how to target the appropriate id when the update event triggers ... slider_names[i] obviously won't work there. I'm probably missing something obvious? Thanks!</p>