title: Get the value of dynamically created data range sliders in Foundation 5
body: <p>I'm coding a web page using <strong>Foundation 5</strong>. This page contains several <a href="http://foundation.zurb.com/docs/components/range_slider.html" rel="nofollow">data range sliders</a>. But <strong>I generate those sliders dynamically</strong>, based on the information fetched from a JSON message. So, <strong>I don't know how many sliders I will have</strong>.</p>
  
  <p>This is how my html for sliders looks like, in a loop (using <a href="http://handlebarsjs.com/" rel="nofollow">Handlebars</a> for templating)</p>
  
  <pre><code>{{#elements}}
  
  &lt;div class="small-10 medium-11 columns"&gt;
      &lt;div id="range-slider-{{id}}" class="range-slider round" data-slider="{{val}}"&gt;
          &lt;span class="range-slider-handle"&gt;&lt;/span&gt;
          &lt;span class="range-slider-active-segment"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  {{/elements}}
  </code></pre>
  
  <p>As you can see, each slider has a different id and a different starting value</p>
  
  <p>Now, I want to handle the event of moving my sliders. So, I've created one method that respond to the 'change' event on any slider</p>
  
  <pre><code>$('[data-slider]').on('change.fndtn.slider', function(event){
    // do something when the value changes
  
  });
  </code></pre>
  
  <p>My question is: <strong>How do I access to the value of the slider that raised the event?</strong></p>
  
  <p>The recommended method is</p>
  
  <pre><code>$('#slider_id').attr('data-slider');
  </code></pre>
  
  <p>But <strong>I don't know the slider_id, because it's dynamic</strong>. </p>
  
  <p>I couldn't find an example working with dynamically generated sliders. Any clues?</p>