feat(range): hookup the ion-range with a custom value accessor

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,

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`
 

packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.html

@@ -43,8 +43,8 @@
       </ion-item>
     </ion-col>
     <ion-col>
-        Value:
+      Value:
-        <span id="searchOutput">{{searchValue}}</span>
+      <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" >
+      <label for="stdRangeInput">Range Value</label>
-        <ion-segment-button value="taco"></ion-segment-button>
+      <input id="stdRangeInput" type="number" [(ngModel)]="rangeValue"/>
-        <ion-segment-button value="burrito"></ion-segment-button>
-        <ion-segment-button value="enchilada"></ion-segment-button>
-      </ion-segment>
     </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>

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() {}

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() {