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

【问题标题】：ionic 2 how to customize ion-range?ionic 2 如何自定义离子范围？
【发布时间】：2017-04-20 08:24:07
【问题描述】：

在 ionic 2 中，我想将 ion-range 自定义为如下所示图片，或者我应该说：有没有办法自定义 ion-range ？：

这是我的代码

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

这是我的范围

【问题讨论】：

你已经尝试了什么？请发布一些代码或您面临的问题
嗨，您是否设法在拇指上添加图像？

标签： css ionic-framework range ionic2

【解决方案1】：

我确实找到了如何自定义 “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>

【讨论】：