Ion-range NgModel not updating

My ion-range component is not working because ngModel is not updating when changed. I printed on the logs the value of the ngmodel and I saw that it never changes. Is the page in question a modal?

MyPage .html:
<ion-content class="ion-padding">
  <ion-row class="ion-margin-bottom">
    <ion-col size="7">
      <ion-label>Apparent Size</ion-label>
    <ion-col size="5" class="ion-text-end">
      <ion-label>from {{this.apparentSizeTotalRange.lower}}' to
  <ion-row class="ion-margin-bottom">
    <ion-col size="">
      <ion-range class="dual-range" dual-knobs snaps="false" step="10" pin="false"
         [min]="20" [max]="100" [(ngModel)]="this.apparentSizeTotalRange"></ion-range>
MyPage .ts:
import { Component, OnInit, Input } from '@angular/core';
import { ModalController} from '@ionic/angular';

  selector: 'app-filter',
  templateUrl: './',
  styleUrls: ['./'],

export class FilterPage implements OnInit {

  apparentSizeTotalRange: any = { lower: 0, upper: 0 };

constructor(private modalController: ModalController) {  }

ngOnInit() {

initFilters() {
    this.apparentSizeTotalRange = {lower: 20, upper: 100};

I also tried to set the range values as follows without getting results:

this.apparentSizeTotalRange.lower = 10;
this.apparentSizeTotalRange.upper = 100;

Can anyone help me?

Assuming you copied this faithfully, it’s syntactically broken (opening square bracket around max is missing). If I get rid of the needless square brackets around min and max, it seems to behave as I would expect, in that the stuff in the <ion-label> changes when I drag the slider handles around.

<ion-range class="dual-range" dual-knobs snaps="false" step="10" pin="false"
                   min="20" max="100" [(ngModel)]="this.apparentSizeTotalRange"></ion-range>

Thanks for the reply. That’s right, the missing square bracket was a copy error. I tried to remove the brackets from both “Min” and “Max” but it still doesn’t works. Both knobs remain at zero like that: