Ion-range NgModel not updating

<ion-content class="ion-padding">
  <ion-row class="ion-margin-bottom">
    <ion-col size="7">
      <ion-label>Apparent Size</ion-label>
    </ion-col>
    <ion-col size="5" class="ion-text-end">
      <ion-label>from {{this.apparentSizeTotalRange.lower}}' to
        {{this.apparentSizeTotalRange.upper}}'
      </ion-label>
    </ion-col>
  </ion-row>
  <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>
    </ion-col>
  </ion-row>
</ion-content>

import { Component, OnInit, Input } from '@angular/core';
import { ModalController} from '@ionic/angular';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.page.html',
  styleUrls: ['./filter.page.scss'],
})

export class FilterPage implements OnInit {

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

constructor(private modalController: ModalController) {  }

ngOnInit() {
    this.initFilters();
  }

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