From 41ccdd52a6eb63508cf3b89b67aae383e822054b Mon Sep 17 00:00:00 2001
From: Ken Sodemann <ken@ionic.io>
Date: Wed, 31 Jan 2018 11:22:07 -0600
Subject: [PATCH] feat(range): hookup the ion-range with a custom value
 accessor

---
 .../select-value-accessor.ts                  |  2 +-
 packages/demos/angular/README.md              |  2 +-
 .../basic-inputs-page.component.html          | 23 +++++++++++--------
 .../basic-inputs-page.component.ts            |  4 ++++
 .../app/popover/popover-page-to-present.ts    |  5 ++--
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/angular/src/control-value-accessors/select-value-accessor.ts b/packages/angular/src/control-value-accessors/select-value-accessor.ts
index c27ea619ea..4a5f9395b9 100644
--- a/packages/angular/src/control-value-accessors/select-value-accessor.ts
+++ b/packages/angular/src/control-value-accessors/select-value-accessor.ts
@@ -5,7 +5,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 // https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
+  selector: 'ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/packages/demos/angular/README.md b/packages/demos/angular/README.md
index ba30a983e4..c7260a6ee9 100644
--- a/packages/demos/angular/README.md
+++ b/packages/demos/angular/README.md
@@ -28,7 +28,7 @@ In order to test local changes they need to be copied into `node_modules` after
 
 1. In `packages/core`, run `npm run build`
 1. In `packages/demos/angular`, run `rm -rf node_modules/\@ionic/core/dist`
-1. In `packages/demos/angular`, run `cp -r ../../core/dist node_modules/\@ionic/core/dist`
+1. In `packages/demos/angular`, run `cp -R ../../core/dist node_modules/\@ionic/core/dist`
 
 Use a similar procedure if you want to test local changes to `@ionic/angular`
 
diff --git a/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.html b/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.html
index 6740622cef..d0bb3cee28 100644
--- a/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.html
+++ b/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.html
@@ -43,8 +43,8 @@
       </ion-item>
     </ion-col>
     <ion-col>
-        Value:
-        <span id="searchOutput">{{searchValue}}</span>
+      Value:
+      <span id="searchOutput">{{searchValue}}</span>
     </ion-col>
   </ion-row>
 
@@ -189,22 +189,27 @@
 
   <ion-row>
     <ion-col>
-      <h2>Segment</h2>
+      <h2>Range</h2>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
-      <ion-segment [(ngModel)]="segmentValue" >
-        <ion-segment-button value="taco"></ion-segment-button>
-        <ion-segment-button value="burrito"></ion-segment-button>
-        <ion-segment-button value="enchilada"></ion-segment-button>
-      </ion-segment>
+      <label for="stdRangeInput">Range Value</label>
+      <input id="stdRangeInput" type="number" [(ngModel)]="rangeValue"/>
     </ion-col>
     <ion-col>
       Value:
-      <span >{{segmentValue}}</span>
+      <span>{{rangeValue}}</span>
+      <span>{{typeOf(rangeValue)}}</span>
     </ion-col>
   </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <ion-range id="ionRangeInput" [(ngModel)]="rangeValue"></ion-range>
+    </ion-col>
+    <ion-col></ion-col>
+  </ion-row>
 </ion-grid>
 
 <a href='home'>Home</a>
diff --git a/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.ts b/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.ts
index 6689000a10..0ad89479c6 100644
--- a/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.ts
+++ b/packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.ts
@@ -15,6 +15,10 @@ export class BasicInputsPageComponent implements OnInit {
   checkboxValue = true;
   toggleValue = false;
 
+  rangeValue = 15;
+
+  searchValue: string;
+
   constructor() {}
 
   ngOnInit() {}
diff --git a/packages/demos/angular/src/app/popover/popover-page-to-present.ts b/packages/demos/angular/src/app/popover/popover-page-to-present.ts
index c9d6d79c22..497ec718eb 100644
--- a/packages/demos/angular/src/app/popover/popover-page-to-present.ts
+++ b/packages/demos/angular/src/app/popover/popover-page-to-present.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
+//  import { PopoverController } from '@ionic/angular';
 
 @Component({
   selector: 'page-one',
@@ -14,8 +14,7 @@ export class PopoverPageToPresent {
 
   ngOnInitDetection = 'initial';
 
-  constructor(private controller: PopoverController) {
-  }
+  // constructor(private controller: PopoverController) { }
 
 
   ngOnInit() {