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
});
}
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:
And in your component add back:
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