Ion-range error when loading from toolbar ionic 2 RC2

Ionic Framework ionic-v3
1

I get a

Error in ./Navbar class Navbar - inline template:0:32 caused by: Attempted to assign to readonly property.

When I try to load a ion-range inside a ion-toolbar on the header, like so:

<ion-header>
  <ion-navbar color="royal">
    <ion-title>
      Test
    </ion-title>
  </ion-navbar>

  <ion-toolbar>
    <ion-item-divider>
      Upcoming Events
      <span>Within: {{range}} Mi</span>
    </ion-item-divider>
    <ion-item>
      <ion-range color="primary" [(ngModel)]="range" min="2400" max="2500" step="5" snaps="true">
        <ion-icon color="primary" range-left small name="contract"></ion-icon>
        <ion-icon color="primary" range-right name="expand"></ion-icon>
      </ion-range>
    </ion-item>
  </ion-toolbar>
</ion-header>

Home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  range: number;
  constructor(public navCtrl: NavController) {
  }

  ionViewDidLoad() {
    this.range = 2400;
  }

}

For some reason the error stops if I open the developer tools on safari before I enter the page.

it appears to be a problem not with on-range at all, but with livereload.