CODEWITHSUNDEEP
angularionic2
Sireini
Sireini

Reputation: 4262

Ionic 2 - range slider

I have a ionic 2 range slider component, what I would like to do is set an gradient color on the slider. So basically from 0 to 10 where 0 is grey and 10 is red. How do I style my range slider with an color gradient?

This is my range slider:

  <ion-item text-wrap>
    <ion-label stacked>Beperking: </ion-label><ion-badge item-right color="secondary">{{ Beperking }}</ion-badge>
    <ion-range min="0" max="10" [(ngModel)]="Beperking" color="secondary" pin="true">
      <ion-label range-left>0</ion-label>
      <ion-label range-right>10</ion-label>
    </ion-range>
  </ion-item>

How do I change the color when it is above an certain value?

Upvotes: 0

Views: 551

Answers (2)

AhrenFullStop
AhrenFullStop

Reputation: 512

Fire a method when the number gets changed like so:

     <ion-range #x (ionChange)="myMethod(x.ratio)" ...>
        ...
     </ion-range>

then your methods should just map the returned ratio to a specific colour, there is a good example here: https://codepen.io/zhipeng/pen/gBdDE

Upvotes: 1

Omkar Tondawalkar
Omkar Tondawalkar

Reputation: 225

for this you need to map the change in slider to a valve and on change event fire a function which would change the style of the target component or you could nest it in [] property tag to make the effect using data binding.

Upvotes: 0

Related Questions