0

I'm trying to add a range-slider inside tabs-content. When I put a range-sliders within the first tabs-content everything is ok, but when I try to add another range-slider in the second tabs-content, this range-slider does not charging properly.

Everything works fine when range-slider is outside of tabs-content, but I need it to be inside. Can anyone help me with this issue?

My code:

<ul class="tabs" data-tab>
    <li class="tab-title"><a href="#tab1 active">TAB1</a></li>
    <li class="tab-title"><a href="#tab2">TAB2</a></li>
</ul>
<div class="tabs-content">
    <div class="content active" id="tab1">
        <div class="range-slider radius" data-slider="600" data-options="start: 100; end: 1000; step: 100; display_selector:#t1;"> 
            <span class="range-slider-handle"></span> 
            <span class="range-slider-active-segment"></span> 
            <input type="hidden" name="t1" /> 
        </div>                  
    </div>
    <div class="content" id="tab2">
        <div class="range-slider radius" data-slider="1000" data-options="start: 200; end: 2000; step: 200; display_selector:#t2;"> 
            <span class="range-slider-handle"></span> 
            <span class="range-slider-active-segment"></span> 
            <input type="hidden" name="t2" /> 
        </div>
    </div>
</div>

The tabs and range-slider codes are from foundation zurb docs - separatly they works fine.

wanq
  • 1
  • 2
  • What is your existing code/markup? – talegna Oct 10 '14 at 12:58
  • Just added the code in the task – wanq Oct 10 '14 at 14:46
  • I'm guessing you have probably resolved this by now, but looking back at this I vaguely remember that because an item wasn't currently being displayed jQuery will not render them quite as expected (I think my issue was regarding setting the width of objects). Have you considered not performing the creation of the slider until the tab it is contained in is displayed? If you have resolved this issue, put what you did as an answer for future people to find :-) – talegna Oct 29 '14 at 15:24

2 Answers2

0

Yes, I solved the problem. Instead of slider from the foundation, I used a slider from jqueryui.com/slider/ and everything works as it should. Talegna - I haven't tried your method - I'll try it next time. Thanks.

wanq
  • 1
  • 2
0

Try this for me works in tab/accordion etc.

$(document).foundation({
tab/accordion:{callback : function (tab/accordion) {
$(document).foundation('slider', 'reflow');
}}
});
Bracia Marx
  • 1