ionic 2 如何自定义离子范围?

use*_*006 3 css range ionic-framework ionic2

在离子 2 中,我想将离子范围自定义为如下图所示,或者我应该说:有没有办法自定义离子范围?: 在此处输入图片说明

这是我的代码

    <ion-row>
      <ion-item>
         <ion-range min="500" max="1500" step="500" snaps="true" color="secondary"></ion-range>
      </ion-item>
    </ion-row>
Run Code Online (Sandbox Code Playgroud)

这是我的范围

在此处输入图片说明

use*_*006 5

我确实找到了如何自定义"ion-range",这是我构建的(我知道它看起来不准确):

在此处输入图片说明

这是我的步骤:- 1- 将图片上显示的这些代码行添加到您的 src\theme\variables.scss 在此处输入图片说明

注意:在以下链接ionic2 docs中,您可以使用许多变量来自定义离子范围

2-这是我的组件代码:

<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>
Run Code Online (Sandbox Code Playgroud)