css - item - ionic tabs

iónico 2 cómo personalizar el rango de iones?

Question

en ionic 2, quiero personalizar el rango de iones para que sea similar a la siguiente imagen, o debería decir: ¿hay forma de personalizar el rango de iones ?

aquí está mi código

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

y aquí está mi rango

Answer 1

Descubrí cómo personalizar el "rango iónico" , y aquí está lo que construí (sé que no se ve exactamente):

aquí están mis pasos: 1- Agregue esta línea de códigos que se muestra en la imagen a su src / theme / variables.scss

Nota: hay muchas variables que puede usar para personalizar su rango de iones en el siguiente enlace : documentos ionic2

2- Aquí está mi código de componente:

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