Menu icon Foundation
Range Slider inside modal/tabbed content

Hey there!

After finding the "Range Slider" (http://foundation.zurb.com/docs/components/range_slider.html) in the documentation, I tried to implement it into our site.

The sliders work perfectly IF they are in a div that is displayed by default... however, if the div they are in has "display:none" applied, and is then shown (like a modal or tabbed content that is shown on some action) the sliders are broken.

Is this a known issue?

Thanks,
Brian!

range slider

Hey there!

After finding the "Range Slider" (http://foundation.zurb.com/docs/components/range_slider.html) in the documentation, I tried to implement it into our site.

The sliders work perfectly IF they are in a div that is displayed by default... however, if the div they are in has "display:none" applied, and is then shown (like a modal or tabbed content that is shown on some action) the sliders are broken.

Is this a known issue?

Thanks,
Brian!

Rafi Benkual over 5 years ago

You may need to reflow the slider. The JS needs to be reinitialized.

$document.foundation('reflow');

Paulo Oliveira over 5 years ago

I can confirm that, as well. I am using foundation-rails 5.2.2.0.

Paulo Oliveira over 5 years ago

Yeah, I don't think that this is a bug. Javascript code has to decide the size of each step, which is based upon a fraction of the space available for gliding.

Everything inside a display: none does not have any metric to be fractioned, so I don't think it is supposed to work without a reflow when a tab of reveal is made active.

Hans Gelok about 5 years ago

You can find the solution here:

http://codepen.io/winghouchan/pen/msiBH

(by winghouchan)