Hi,
I am new to Ionic in gerneral and have some basic questions.
I noticed when I use
<ion-item>
<ion-range min="18" max="100" dualKnobs="true" pin="true" [(ngModel)]="setdage" color="danger">
<ion-label range-left>18</ion-label>
<ion-label range-right>100+</ion-label>
</ion-range>
</ion-item>
and try to display the values as:
<ion-badge color="danger" item-right>{{setdage | json}}</ion-badge>
It will output:
{ “lower”: 18, “upper”: 100}
How can I get the badge to only display one of the values like seen in the api example below?
Thanks in advance!
1 Like
In case anyone was searching for answers:
{{setdage.lower}} and {{setdage.upper}} will achieve the desired result
3 Likes
How can you preset the {{setdage.lower}} and {{setdage.upper}} values?
Thanks!
<ion-item>
<ion-badge color="primary">{{this.timeMin2}}</ion-badge>
</ion-item>
<ion-item>
<ion-badge color="primary" item-right>{{this.timeMax2}}</ion-badge>
</ion-item>
</ion-row>
<ion-range dualKnobs="true" [min]=timeMin [max]=timeMax step="3"
snaps="true" [(ngModel)]="time" (ionChange)="setBadge(time)" ></ion-range>
time: any;
timeMin: any = 100;
timeMax: any = 200;
timeMin2: any;
timeMax2: any;
constructor(){
this.timeMin2 = this.timeMin;
this.timeMax2 = this.timeMax;
}
setBadge(time) {
this.timeMin2 = time.lower;
this.timeMax2 = time.upper;
}
3 Likes