Question

我一直在尝试制作离子范围的垂直范围滑块，并尝试使用离子范围。直到它是水平的，它都是好的，但是当我们尝试使其垂直时，它不起作用。

我试图通过HTML输入标签使其正常运行，但无法应用任何CSS类。 HTML的代码如下，

  <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>

该组件的打字稿代码如下，

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;
 }
}

我在以下课程中被使用过

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;
}

因此，我没有找到实际的错误。请推荐npm软件包或javascript库（如果有）。

如何制作自定义范围滑块？

我们如何在离子中制造垂直范围的隔离器？

0 个答案: