Foundation Slider: how to determine if a value has changed?

Question

I am using Range Range Slider and would like to listen to change-event , but only when the value has changed .

Unfortunately, two changes are detected in init, and every time the window changes.

Example ( Fiddle ):

<div class="range-slider" data-slider data-options="step: 20;">
  <span class="range-slider-handle" role="slider" tabindex="0"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

<script>   
$(document).foundation({
  slider: {
      on_change: function(){
          console.log("changed");
          $("body").append("changed<br/>");
     }
   }
});
</script>

I can not find such an event as onValueChanged. Any ideas how to solve this problem as clean as possible? I would like to avoid workarounds.

Answer 1

, , . sliderVal , , . on_change, , - $('div.range-slider').attr('data-slider') . , ; , , , , sliderVal .

jsFiddle, . , , .

, , sliderVal , . ; jsFiddle, . , , , .

Answer 2

:

yearinfocus.gettyimages.com

:

$('[data-slider]').on('change.fndtn.slider', callback);

:

s.slider.$main = $('.range-slider.')

:

if(!isNaN(parseInt(s.slider.$main.attr('data-slider')-1))){
    var sliderIndex = parseInt(s.slider.$main.attr('data-slider')-1); //zero based
}