Foundation 6 change.zf.slider event not firing

Question

this my first time posting, so here goes...

For the life of me, I cannot get the

$("[data-slider]").on('change.zf.slider', function(){});

event to fire. I've tried using the id of the element as well

$("#slider").on('change.zf.slider', function(){});

but still nothing.

I've searched through google and stack overflow with all possible combinations and variations of this specific problem that came to mind, but no help.

I've gone through the Foundation 6 documentation on this class and that is where I found the event name. But testing it, didn't work.

This is the JS:

<script type="text/javascript">
   $(document).ready(function() {
     $(document).foundation();
   });
   $("[data-slider]").on('change.zf.slider', function() {
     console.log("slider!");
   });
</script>

This is the HTML for the element itself:

<div id="slider" class="slider" data-slider data-initial-start="10">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="val"></span>
  <span class="slider-fill" data-slider-fill></span>
</div>

and these are the includes (they were at the time of posting):

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.offcanvas.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.slider.js"></script>

After posting I remembered the documentation mentioning the need of adding the foundation.core.js, foundation.util.motion.js, foundation.util.keybaord.js, foundation.util.triggers.js and foundation.util.touch.js and then it started throwing the error

Uncaught TypeError: Cannot read property '_init' of undefined

so I searched that, and found a suggestion to add the foundation.util.mediaQuery.js which supposedly has a co-dependency with the core.js, so the includes look as follows.

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.offcanvas.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.motion.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.triggers.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.keyboard.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.touch.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.slider.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.core.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/plugins/foundation.util.mediaQuery.js"></script>

but that broke the foundation functionality, now the off-canvas menu doesn't open either and no errors what-so-ever...

Answer 1

I know this is an old post but you need to use changed.zf.slider rather than change.zf.slider (note the 'd'). So this should work for you:

$("#containerID").on('change changed.zf.slider', function(){});

https://foundation.zurb.com/sites/docs/slider.html