ionic 3 /angular 4 - ion-range one function for multiple ng-models

Question

I got 2 ionic range sliders with additional buttons to increase and decrease value

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="goalProgress" color="tertiary" pin="true" no-padding snaps="true" value="0" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="subtractRangeVal(goalProgress)">
      <ion-icon name="remove-circle" color="tertiary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="addRangeVal(goalProgress)">
      <ion-icon name="add-circle" color="tertiary" ></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="effortValue" color="secondary" pin="true" no-padding snaps="true" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="subtractRangeVal(effortValue)">
      <ion-icon name="remove-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="addRangeVal(effortValue)">
      <ion-icon name="add-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

I want to create functions to increase and decrease values of range

addRangeVal(val) {
 //increase value of the current range
}

subtractRangeVal(val) {
 //decrease value of the current range
}

Ho can I pass ng-model to buttons so I can have control over them? Currently I can only display the current value.

Answer 1

The case here is that you're using the same function for add and subtract for 2 different sliders. And you don't need to pass the variable used in ngModel as a parameter, in your case you'll need to pass an identifier so the function know what variable it needs to add or subtract, so do this:

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="goalProgress" color="tertiary" pin="true" no-padding snaps="true" value="0" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="subtractRangeVal('goalProgress')"> <!-- SEE THAT I'M PASSING THE NAME OF THE VARIABLE AS A STRING -->
      <ion-icon name="remove-circle" color="tertiary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="addRangeVal('goalProgress')">
      <ion-icon name="add-circle" color="tertiary" ></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="effortValue" color="secondary" pin="true" no-padding snaps="true" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="subtractRangeVal('effortValue')">
      <ion-icon name="remove-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="addRangeVal('effortValue')">
      <ion-icon name="add-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

AND IN YOUR TS

public goalProgress: number = 0; // declare your variables as a number
public effortValue: number = 0;

addRangeVal(val) {
  if (val == 'goalProgress'){
    this.goalProgress++;
  } else {
    this.effotValue++;
  }
}

subtractRangeVal(val) {
 if (val == 'goalProgress'){
    this.goalProgress--;
  } else {
    this.effotValue--;
  }
}

But this is one way, a simpler way is decreasing an increasing directly on your HTML

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="goalProgress" color="tertiary" pin="true" no-padding snaps="true" value="0" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="goalProgress--">
      <ion-icon name="remove-circle" color="tertiary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="goalProgress++">
      <ion-icon name="add-circle" color="tertiary" ></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

<ion-item no-lines no-padding>
  <ion-range min="0" max="10" [(ngModel)]="effortValue" color="secondary" pin="true" no-padding snaps="true" (ionChange)="rangeChange()">
    <ion-label range-left>
      <button color="light" (click)="effortValue--">
      <ion-icon name="remove-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
    <ion-label range-right>
      <button color="light" (click)="effortValue++">
      <ion-icon name="add-circle" color="secondary"></ion-icon>
      </button>
    </ion-label>
  </ion-range>
</ion-item>

If using (click)="effortValue++" doesn't work, try verifying if your variables are typed as number ( public effortValue:number = 0 ) or try (click)="effortValue = effortValue + 1" and do the same for the other operations. This way you save some code lines by not having to call a function in your .TS

Hope this helps

Answer 2

There is a more flexible way to do it if you don't want to have to add cases in your functions (imagine you have 10 ranges in your template) :

addRangeVal(propName) {
    this[propName]++;
}

subtractRangeVal(propName) {
    this[propName]--;
}

Then in your template, pass the property name as a string :

<button color="light" (click)="subtractRangeVal('goalProgress')">

Answer 3

Easy way to achieve it:

Html:

 <ion-range dualKnobs="true" [min]=timeMin [max]=timeMax step="3" 
  snaps="true" [(ngModel)]="time" (ionChange)="setBadge(time)" ></ion-range>

in TS file:

 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;
  console.log("min",this.timeMin2);
  console.log("max",this.timeMax2);
}