Ionic: binding 3 dual knob range slides to a singel model

Question

I am using Ionic 3 as a framework for my app. the app has a small configuration page. the user can choose different ranges via three dualknob sliders. the idea is, that those upper and lower limits are used to validate data which the user can enter on other pages. if a value is not between this range, the user gets an alert-toast. im using firebase/angularfire2 as a database. my html code with 3 sliders looks like this:

 <ion-item>
     <ion-label>Range 1</ion-label>
    <ion-range min="-250" max="250" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range1"  color="secondary">
       <ion-label range-left>-250g</ion-label>
      <ion-label range-right>250g</ion-label> 
    </ion-range>
  </ion-item>               
 <ion-item>
     <ion-label>Range2</ion-label>
    <ion-range min="0" max="200" pin="true" dualKnobs="TRUE"  [(ngModel)]="config.range2" color="secondary">
      <ion-label range-left>0</ion-label>
      <ion-label range-right>200</ion-label>
    </ion-range>
  </ion-item>    
  <ion-item>
     <ion-label>Range3</ion-label>
      <ion-range min="0" max="200" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range3"  color="secondary">
      <ion-label range-left>0</ion-label>
      <ion-label range-right>200</ion-label>
    </ion-range>
  </ion-item>   

I want to bind these three ranges to a single model to directly store it in firebase. So I created an interface, but I only manage to bind one range to this interface. the knobs of the other 2 ranges can't be moved and say "NaN" on their knobs. I tried to bind them to different elements of my interface called "config", but that didn't work. I also created fields called upper/lower in the limit but it didnt work. Binding the ranges to three differentImodels worked. i then mapped it to my database model and saved them to firefase. but the other they round didnt work - the knobs didnt accept the values from the database. thank you for your help.

Answer 1

Solved it myself by using a single model per Range-Slider and mapping the values in both directions to and from my database object before commiting.

slider1 = {} as any;
this.slider1.upper = (this.config.slider1max) ? this.config.slider1max : '100';
config.slider1max = this.slider1.upper;