Displaying values from dual knob range?

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