Onsen- Range and Tabbar

Question

This is my codepen http://codepen.io/anon/pen/JGpdvW . And here the code:

<ons-list class="filtri">
    <ons-list-item>
        <ons-row>
            <ons-col width="40px">
                <ons-icon icon="fa-volume-down" class="lower"></ons-icon>
            </ons-col>
            <ons-col class="range-wrapper">
                <input type="range" min="0" max="18" value="10" class="range">
            </ons-col>
            <ons-col width="40px">
                <ons-icon icon="fa-volume-up"></ons-icon>
            </ons-col>
        </ons-row>
    </ons-list-item>

    <ons-list-item>
        <ons-row>
            <ons-col width="40px">
                <ons-icon icon="fa-umbrella" class="lower"></ons-icon>
            </ons-col>
            <ons-col class="range-wrapper">
                <input type="range" value="30" class="range">
            </ons-col>
            <ons-col width="40px">
                <ons-icon icon="fa-umbrella"></ons-icon>
            </ons-col>
        </ons-row>
    </ons-list-item>
  </ons-list>

<ons-tabbar>
    <ons-tab page="xxx.html">
        <!--<ons-icon icon="ion-chevron-left" size="28px" class="tab-icon"></ons-icon>-->
    </ons-tab>
    <ons-tab page="xxx.html">
        <!--<ons-icon icon="ion-android-call" size="28px" class="tab-icon"></ons-icon>-->
    </ons-tab>
    <ons-tab page="xxx.html">
        <!--<ons-icon icon="ion-location" size="28px" class="tab-icon"></ons-icon>-->
    </ons-tab>
    <ons-tab page="xxx.html">
        <ons-icon icon="ion-compose" size="28px" class="tab-icon"></ons-icon>
    </ons-tab>
</ons-tabbar>

The problem is that I cannot move the range. After many many and many test I figure out that, if I delete the tabbar I can do that.

Is this a bug? How I can solve it?

Thanks!

score 1 · Answer 1 · answered Jan 24 '16 at 05:25

That DOM structure is wrong. Tabbar is supposed to be the parent of the page, not a child or sibling (SlidingMenu -> Tabbar -> Pages). You can read about it here in the docs. You just need to change it a bit:

<ons-sliding-menu page="tabbar.html" ... ><ons-sliding-menu>

<ons-template id="tabbar.html">
  <ons-tabbar>
    <ons-tab page="page1.html" active="true"></ons-tab>
    ...
  </ons-tabbar>
</ons-template>

I fixed your Codepen here. If you want to keep the tabbar when you change pages from the sliding menu you have to use tabbar.setActiveTab instead of menu.setMainPage.

Another possibility is to use just the tabbar styles without the component itself. In this case you can keep your current structure but beware that the tabbar won't have any behavior. It's just CSS so you have to write its behavior with JavaScript.

Hope it helps!

Onsen- Range and Tabbar

1 Answers1