Menu icon Foundation
Range Slider not working with slick slider

Title says it all really. When I put a range slider inside of a slide and use slick slide (as recommended by Zurb) it doesn't allow me to drag the handle on the slider. I have switched off the draggable property on slick too.

If i move the range slide markup outside of slick it works perfectly.

Please can someone help?

range sliderslick

Title says it all really. When I put a range slider inside of a slide and use slick slide (as recommended by Zurb) it doesn't allow me to drag the handle on the slider. I have switched off the draggable property on slick too.

If i move the range slide markup outside of slick it works perfectly.

Please can someone help?

Simon G. over 4 years ago

I've actually just found a workaround. I define an onAfterChange event handler and in it reset the sliders to their current value after each change of slide:

 $(document).ready(function() {
  $('.questions').slick({
    dots: true,
    adaptiveHeight: true,
    draggable: false,
    onAfterChange: function () {
      $('.range-slider').foundation('slider', 'set_value', $(this).attr('data-slider'));
    }
  });
});

God knows why, but it works now :-)