Get the value of dynamically created data range sliders in Foundation 5

Question

I'm coding a web page using Foundation 5. This page contains several data range sliders. But I generate those sliders dynamically, based on the information fetched from a JSON message. So, I don't know how many sliders I will have.

This is how my html for sliders looks like, in a loop (using Handlebars for templating)

{{#elements}}

<div class="small-10 medium-11 columns">
    <div id="range-slider-{{id}}" class="range-slider round" data-slider="{{val}}">
        <span class="range-slider-handle"></span>
        <span class="range-slider-active-segment"></span>
    </div>
</div>

{{/elements}}

As you can see, each slider has a different id and a different starting value

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

$('[data-slider]').on('change.fndtn.slider', function(event){
  // do something when the value changes

});

My question is: How do I access to the value of the slider that raised the event?

The recommended method is

$('#slider_id').attr('data-slider');

But I don't know the slider_id, because it's dynamic.

I couldn't find an example working with dynamically generated sliders. Any clues?

Answer 1

Ok. Looks like I found the response

$( this ).attr('id') // The id of the element that raised the event
$( this ).attr('data-slider') // The slider's value