离子2如何定制离子范围？ [英] ionic 2 how to customize ion-range?

问题描述

在离子2中，我想自定义离子范围，就像下面的
pic，或者我应该说：有没有办法定制离子范围？：

in ionic 2, I want to customize the ion-range to be something like the following pic, or I should say : is there way to customize ion-range ?:

这是我的代码

    <ion-row>
      <ion-item>
         <ion-range min="500" max="1500" step="500" snaps="true" color="secondary"></ion-range>
      </ion-item>
    </ion-row>

这是我的范围

推荐答案

我确实找到了如何自定义离子范围，这是我建立的（我知道它看起来不准确）：

I did find out how to customize "ion-range", and here is what I built (I know it look not exact):

这是我的步骤： -
1-将图片中显示的这些代码行添加到您的src\theme\variables.scss

here are my steps:- 1- add these line of codes shown on picture to your src\theme\variables.scss

注意：您可以使用许多变量在folo中定制你的离子范围翼链接 ionic2 docs

Note: there is many variables you can use to customize your ion-range in the folowing link ionic2 docs

2-这是我的组件代码：

2- here is my component code:

<ion-footer>
  <ion-toolbar>
    <ion-row>
      <ion-col width-33 text-left>
        Sedan
      </ion-col>
      <ion-col width-33 text-center>
        SUV
      </ion-col>
      <ion-col width-33 text-right>
        LUX
      </ion-col>
    </ion-row>
    <ion-range (ionChange)="selectCar()" min="500" max="1500" step="500" snaps="true" [(ngModel)]="value">
    </ion-range>

  </ion-toolbar>
 </ion-footer>

这篇关于离子2如何定制离子范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！