From 4669a7aa37629867b9e6e7ad420be10e4415f4d6 Mon Sep 17 00:00:00 2001
From: Manuel Mtz-Almeida <manu.valladolid@gmail.com>
Date: Mon, 18 Sep 2017 20:00:33 +0200
Subject: [PATCH] fix(range): use latest ion-gesture

---
 .../core/src/components/range/range-knob.tsx  |  6 +--
 packages/core/src/components/range/range.tsx  | 50 ++++++++-----------
 2 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/packages/core/src/components/range/range-knob.tsx b/packages/core/src/components/range/range-knob.tsx
index 1913441ec2..52849f5ccf 100644
--- a/packages/core/src/components/range/range-knob.tsx
+++ b/packages/core/src/components/range/range-knob.tsx
@@ -60,11 +60,11 @@ export class RangeKnob {
   render() {
     if (this.pin) {
       return [
-        <div class="range-pin" role="presentation">{this.val}</div>,
-        <div class="range-knob" role="presentation" />
+        <div class='range-pin' role='presentation'>{this.val}</div>,
+        <div class='range-knob' role='presentation' />
       ];
     }
-    return <div class="range-knob" role="presentation" />;
+    return <div class='range-knob' role='presentation' />;
   }
 }
 
diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx
index ae35d6c9c6..d04b38db63 100644
--- a/packages/core/src/components/range/range.tsx
+++ b/packages/core/src/components/range/range.tsx
@@ -45,8 +45,7 @@ export class Range implements BaseInputComponent {
   @Prop() color: string;
   @Prop() mode: string;
 
-  @Prop({ state: true })
-  value: any;
+  @Prop({ mutable: true }) value: any;
 
   @Prop() disabled: boolean = false;
   @Prop() min: number = 0;
@@ -225,14 +224,9 @@ export class Range implements BaseInputComponent {
         upper: Math.max(this._valA, this._valB)
       };
 
-      console.debug(
-        `range, updateKnob: ${ratio}, lower: ${this.value.lower}, upper: ${this
-          .value.upper}`
-      );
     } else {
       // single knob only has one value
       value = this._valA;
-      console.debug(`range, updateKnob: ${ratio}, value: ${this.value}`);
     }
 
     // Update input value
@@ -280,17 +274,13 @@ export class Range implements BaseInputComponent {
     this.updateBar();
   }
 
-  canStart() {
-    const el = this.rangeEl.querySelector('.range-slider');
-    this._rect = el.getBoundingClientRect();
-    return !this.disabled;
-  }
-
-  onDown(detail: GestureDetail) {
+  onDragStart(detail: GestureDetail) {
     if (this.disabled) return false;
     this.fireFocus();
 
     const current = { x: detail.currentX, y: detail.currentY };
+    const el = this.rangeEl.querySelector('.range-slider');
+    this._rect = el.getBoundingClientRect();
     const rect = this._rect;
 
     // figure out which knob they started closer to
@@ -307,7 +297,7 @@ export class Range implements BaseInputComponent {
     return true;
   }
 
-  onUp(detail: GestureDetail) {
+  onDragEnd(detail: GestureDetail) {
     if (this.disabled) {
       return;
     }
@@ -339,43 +329,43 @@ export class Range implements BaseInputComponent {
 
   render() {
     return [
-      <slot name="range-start" />,
+      <slot name='range-start' />,
 
       <ion-gesture
         props={{
           disableScroll: true,
-          canStart: this.canStart.bind(this),
-          onDown: this.onDown.bind(this),
+          onStart: this.onDragStart.bind(this),
           onMove: this.onDragMove.bind(this),
-          onUp: this.onUp.bind(this),
+          onEnd: this.onDragEnd.bind(this),
+          enabled: !this.disabled,
           gestureName: 'range',
           gesturePriority: 30,
-          type: 'press,pan',
+          type: 'pan',
           direction: 'x',
           threshold: 0
         }}
       >
-        <div class="range-slider">
+        <div class='range-slider'>
           {this._ticks.map(t =>
             <div
               style={{ left: t.left }}
-              role="presentation"
+              role='presentation'
               class={{ 'range-tick': true, 'range-tick-active': t.active }}
             />
           )}
 
-          <div class="range-bar" role="presentation" />
+          <div class='range-bar' role='presentation' />
           <div
-            class="range-bar range-bar-active"
+            class='range-bar range-bar-active'
             style={{
               left: this._barL,
               right: this._barR
             }}
-            role="presentation"
+            role='presentation'
           />
           <ion-range-knob
-            class="range-knob-handle"
-            knob="knobA"
+            class='range-knob-handle'
+            knob='knobA'
             pressed={this._pressedA}
             ratio={this._ratioA}
             val={this._valA}
@@ -386,8 +376,8 @@ export class Range implements BaseInputComponent {
 
           {this.dualKnobs
             ? <ion-range-knob
-                class="range-knob-handle"
-                knob="knobB"
+                class='range-knob-handle'
+                knob='knobB'
                 pressed={this._pressedB}
                 ratio={this._ratioB}
                 val={this._valB}
@@ -398,7 +388,7 @@ export class Range implements BaseInputComponent {
             : null}
         </div>
       </ion-gesture>,
-      <slot name="range-end" />
+      <slot name='range-end' />
     ];
   }
 }