Ionic Range dual knob settings initial values and update dynamically

866 Views Asked by At

I'm new to Ionic and TypeScript. I'm trying to set the initial values for my Ionic Range (V5) but I'm having some issues. According anothers posts, in the ngModel there are upper and lower properties but I'm not sure the best way to set that properties.

My html:

<ion-range dual-knobs pin color="primary" max="460" min="300" debounce="500" [(ngModel)]="VKnobValues" (ionChange)="VKnobVal($event)">

My ts 1: The initial values are updated but knobs are not updated dynamically:

public VKnobValues = {lower:380, upper:380}; 

someFunction (VMin, VMax){
   // This doesn't work
   this.VKnobValues.lower = VMin;      
   this.VKnobValues.upper = VMax;
}

VKnobVal(event:any){  
   console.log ("VKNobVal:" + JSON.stringify(event.detail.value));  
}

My ts 2: I have no Initial values and the knobs are not updated dynamically:

public VKnobValues = new Object();

someFunction (VMin, VMax){
   // This doesn't work
   this.VKnobValues["lower"] = VMin;
   this.VKnobValues["upper"] = VMax;      
}

VKnobVal(event:any){  
   console.log ("VKNobVal:" + JSON.stringify(event.detail.value));  
}

My ts 3: I have no Initial values and the knobs are updated dynamically:

public VKnobValues = new Object();

someFunction (VMin, VMax){
   // This works
   this.VKnobValues = {
    lower:VMin,
    upper:VMax
  } 
}

VKnobVal(event:any){  
   console.log ("VKNobVal:" + JSON.stringify(event.detail.value));  
}

My ts 3 works ok but I have no reference to upper and lower properties if I need to do some conditional if somewhere in the code for example using my ts 1:

if (this.lastVMax != this.VKnobValues.upper)
{
   // Do something

   this.lastVMax = this.VKnobValues.upper;
}

Yes, I could use some extra variables but maybe I'm doing something wrong. Any advice? Thanks

Edit: For better understanding I added my VKnobVal function

Edit 2: Added original functions

Bluetooth Data Function:

BTData() {

 let Buffer = new Uint8Array(64);
 let i = 0;
 let myZone = new NgZone({ });
 let waitEnc:boolean = true;
    
 this.BluetoothData = this.BTSerial.subscribeRawData().subscribe((data) => {    
   
   let Bytes = new Uint8Array(data);
   // Some Buffer Controls Here 

   // Bluetooth Data CMD
   if (Buffer[2] == 0x02 && i > 25)
   {          
    myZone.run(() => {        
    this.setListaValues(Buffer);            
   });
   waitEnc = true;
   i = 0;
  }
 },
 () => {});
}

// Populate list with values
setListaValues(Buffer:Uint8Array) {
 this.items = [];  

 this.VValMax = Math.round((cteVNADC + Buffer[5]) * 1.11);
 this.items.push ({
  param: this.Params[(2)],
  val:this.VValMax.toString(),
  icon:this.icon,
  color: this.colorIcon
 });    

 this.VValMin = Math.round((cteVNADC * 80 / 100 + Buffer[9]) * 1.11);
 this.items.push ({
  param: this.Params[(3)],
  val:this.VValMin.toString(),
  icon:this.icon,
  color: this.colorIcon
 });    

 // Only this works
 this.VKnobValues = {
  lower:this.VValMin,
  upper:this.VValMax
 }            

 this.items.push ({
  param: this.Params[(4)],
  val:(Buffer[6] * .05).toFixed(1),
  icon:this.icon,
  color: this.colorIcon
 });    

  this.items.push ({
   param: this.Params[(6)],
   val:(Buffer[7] * .1).toFixed(1),
   icon:this.icon,
   color: this.colorIcon
  });    
  
  this.items.push ({
   param: this.Params[(8)],
   val:(Buffer[8] * .3).toFixed(1),
   icon:this.icon,
   color: this.colorIcon
  });    
}
1

There are 1 best solutions below

10
On

I think your first example should work, however if you check the documentation you can see that the attribute called "value" is used for controlling the value of the range, it could be that the ngModel attribute isnt available on the component. Have you tried changing [(ngModel)] to [value] so the following would look like:

For your template:

<ion-range dual-knobs pin color="primary" max="460" min="300" debounce="500" [value]="VKnobValues" (ionChange)="VKnobVal($event)">

And in your component add back:

public VKnobValues = {lower:380, upper:380}; 

I dont know which version of Ionic you are using but im linking the v6 documentation if you want to read more since the value attribute is used in both v5 and v6.

https://ionicframework.com/docs/api/range#value