Clash Royale CLAN TAG

How can we make a verticle range silder in ionic?

I have been trying to make a vertical range slider in ionic and tried to use ion-range. As it is good until it is horizontal but when we tried to make it verticle it does not work.

I have tried to make it by HTML input tag it is working fine, but not able to apply any CSS classes. The code for HTML is as follows,

<ion-content padding>
<ion-scroll scrollY="true">
<div class="timeline">
<div class="cashback-date" [style.padding-top.px]="paddingTop+(sliderValue*50)">
{{date}}
</div>
<div class="range">
<!-- <div class="range-track" [style.height.px]="cashbackArray.length*50"></div>
<div class="range-handle"></div> -->

<input class="input-range" [style.height.px]="cashbackArray.length*50" type="range" step="1" [(ngModel)]="sliderValue" (ngModelChange)="setTimelineNode($event)" min="0" max="{{cashbackArray.length-1}}">

</div>

<div class="cashback-details" [style.padding-top.px]="paddingTop+(sliderValue*50)">
<h5>{{label}}</h5>
<h6> {{value}} </h6>
</div>
</div>
</ion-scroll>
</ion-content>


The typescript code for the component is as follows,

import { Component} from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

public cashbackArray:any;
public sliderValue:any;
public date:any;
public label:any;
public value:any;
public paddingTop:number=0;

constructor(public navCtrl: NavController) {
this.cashbackArray = [
{
date:new Date().toDateString(),
label:"April",
value:"2000 baht"
},
{
date:new Date().toDateString(),
label:"May",
value:"3000 baht"
},
{
date:new Date().toDateString(),
label:"June",
value:"4200 baht"
},
{
date:new Date().toDateString(),
label:"July",
value:"2000 baht"
},
{
date:new Date().toDateString(),
label:"August",
value:"2000 baht"
},
{
date:new Date().toDateString(),
label:"September",
value:"2000 baht"
}
];

this.sliderValue=0;
this.date = this.cashbackArray[0].date;
this.label = this.cashbackArray[0].label;
this.value = this.cashbackArray[0].value;
}

setTimelineNode()
{
console.log(this.sliderValue);
this.date = this.cashbackArray[this.sliderValue].date;
this.label = this.cashbackArray[this.sliderValue].label;
this.value = this.cashbackArray[this.sliderValue].value;
}
}


I have been used following classes,

ion-scroll{
padding:5px;
height:50%;
background-color: cornflowerblue;
}

.timeline{
display:flex;
height:auto;
background-color: transparent;
margin:0 auto;
justify-content:center;
align-content:flex-start;
}

// Slider
.input-range {
margin:0 auto;
-webkit-appearance: none;
border-radius: 5px;
outline: none;
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */

transition: all 1s ease-in;

transform:rotate(180deg);

}

.cashback-date{

flex:1;
text-align: right;
transition: all 1s ease-in;
}

.range{
flex:1;
}

.cashback-details{
flex:1;
text-align:left;
transition: all 1s ease-in;
}


So, I am not finding the actual error.
Please recommend npm packages or javascript libraries if available.

What about making a custom range slider ?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.