Menu icon Foundation
Range Slider won't slide until window resize

Hi everyone - I'm using the range slider and it simply won't slide - until I resize the window that is. Anyone know how to fix this? As a workaround I've tried this jquery:

 $(".range-slider-handle").click(function) {
      $(window).trigger('resize'); 
 });

But nothing happens... This is the markup I'm using:

<div id="multiple" class="reveal-modal" data-reveal>
    <div class="range-slider" data-slider>
        <span class="range-slider-handle"></span>
        <span class="range-slider-active-segment"></span>
        <input type="hidden">
    </div>
    <div class="hidden"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
    </div>
    <div class="center">
        <a class="button" href="questionadded.php/?title=<?php
        echo $_GET['title'];?>"> Add Question </a>
    </div>
</div>
            

         

As you can see, the slider is inside a modal. Not sure if that should make a difference. Any help much appreciated. Have tested in Chrome and Firefox, same thing happening in both.

Thanks
Wilf

range-sliderFoundation-5

Hi everyone - I'm using the range slider and it simply won't slide - until I resize the window that is. Anyone know how to fix this? As a workaround I've tried this jquery:

 $(".range-slider-handle").click(function) {
      $(window).trigger('resize'); 
 });

But nothing happens... This is the markup I'm using:

<div id="multiple" class="reveal-modal" data-reveal>
    <div class="range-slider" data-slider>
        <span class="range-slider-handle"></span>
        <span class="range-slider-active-segment"></span>
        <input type="hidden">
    </div>
    <div class="hidden"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
        <input type="text" placeholder="Answer"> 
    </div>
    <div class="center">
        <a class="button" href="questionadded.php/?title=<?php
        echo $_GET['title'];?>"> Add Question </a>
    </div>
</div>
            

         

As you can see, the slider is inside a modal. Not sure if that should make a difference. Any help much appreciated. Have tested in Chrome and Firefox, same thing happening in both.

Thanks
Wilf

Rafi Benkual over 5 years ago

That's beacuse it is inside a reveal modal so the Foundation JS has already been initialized on the page. You can reflow foundation in this case which is a better way that window resize.

$document.foundation('slider', 'reflow');

This will re-apply listeners to the DOM

Wilf Horsfall over 5 years ago

Thanks Rafi - unfortunately the code isn't doing anything for me. Is there anywhere you specific you recommend putting it? Cheers.

Toni Andric over 5 years ago

Hey,

i have the same issue and i do not know how to solve it. Not even sure where to put the mentioned code :(.

Is there any1 who managed to make it work?

Wing-Hou Chan over 5 years ago

Howdy everyone!

Here is a Pen demonstrating Rafi's solution: http://codepen.io/winghouchan/pen/msiBH

The code you will need is this:

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
  $(document).foundation('reflow');
});

The recommended place to put this script would be in your main script file for your site.