fix(range): prevent change detection exception

Author: adamdbradley

src/components/range/range.ts

@@ -4,7 +4,7 @@ import {NG_VALUE_ACCESSOR} from '@angular/common';
 import {Form} from '../../util/form';
 import {isTrueProperty, isNumber, isString, isPresent, clamp} from '../../util/util';
 import {Item} from '../item/item';
-import {pointerCoord, Coordinates} from '../../util/dom';
+import {pointerCoord, Coordinates, raf} from '../../util/dom';
 
 
 const RANGE_VALUE_ACCESSOR = new Provider(
@@ -343,11 +343,11 @@ export class Range {
     this._renderer.setElementStyle(this._bar.nativeElement, 'left', barL);
     this._renderer.setElementStyle(this._bar.nativeElement, 'right', barR);
 
-    this.createTicks();
-
     // add touchstart/mousedown listeners
     this._renderer.listen(this._slider.nativeElement, 'touchstart', this.pointerDown.bind(this));
     this._mouseRemove = this._renderer.listen(this._slider.nativeElement, 'mousedown', this.pointerDown.bind(this));
+
+    this.createTicks();
   }
 
   /**
@@ -544,18 +544,18 @@ export class Range {
    */
   createTicks() {
     if (this._snaps) {
-      this._ticks = [];
-      for (var value = this._min; value <= this._max; value += this._step) {
-        var ratio = this.valueToRatio(value);
-        this._ticks.push({
-          ratio: ratio,
-          left: `${ratio * 100}%`,
-        });
-      }
-      this.updateTicks();
-
-    } else {
-      this._ticks = null;
+      raf(() => {
+        // TODO: Fix to not use RAF
+        this._ticks = [];
+        for (var value = this._min; value <= this._max; value += this._step) {
+          var ratio = this.valueToRatio(value);
+          this._ticks.push({
+            ratio: ratio,
+            left: `${ratio * 100}%`,
+          });
+        }
+        this.updateTicks();
+      });
     }
   }
 

src/components/range/test/basic/index.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ionicBootstrap} from '../../../../../src';
+import {ionicBootstrap, Range} from '../../../../../src';
 
 
 @Component({
@@ -13,7 +13,7 @@ class Page1 {
   dualValue: any;
   dualValue2 = {lower: 33, upper: 60};
 
-  rangeChange(ev) {
+  rangeChange(ev: Range) {
     console.log(`range, change, ratio: ${ev.ratio}, value: ${ev.value}`);
   }