Ionic item-range vertical - how can i change the range to be vertical


#1

I want it to be from top to bottom and not from right to left
ANy way to achieve that ?

 <ion-slide>
                <h2 class="slide-title">{{ 'TUTORIAL_SLIDE2_TITLE' | translate }}</h2>
                <p>{{ 'TUTORIAL_SLIDE2_DESCRIPTION' | translate }}</p>
                <br />
                <ion-item text-center >
                    <ion-range min="15" max="75" [(ngModel)]="account.age" pin="true" >
                        <ion-label range-left>15</ion-label>
                        <ion-label range-right>75</ion-label>
                    </ion-range>
                    
                </ion-item>
                
                Hey, You are <b style="font-size:xx-large">{{account.age}}</b> years young! Great for you!
                <button ion-button icon-end large clear (click)="next()">
              {{ 'TUTORIAL_CONTINUE_BUTTON' | translate }}
              <ion-icon name="arrow-forward"></ion-icon>
          </button>
            </ion-slide>


#2

I don’t believe this is supported yet. This issue indicates that it’s on some feature request tracker somewhere, but I don’t think we the public has access to it. I think somebody mentioned using the material design slider to try to do this. Edit: no, vertical ranges aren’t in the MD spec.


#3

You can craft your own easy enough…