From d24b080cb749308933e2576659a3a542724d380a Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 31 May 2016 14:37:43 -0400
Subject: [PATCH] fix(range): fix styling on range, add demo

references #5422
---
 demos/range/index.ts                | 15 ++++++++
 demos/range/main.html               | 54 +++++++++++++++++++++++++++++
 src/components/range/range.ios.scss |  4 +--
 src/components/range/range.md.scss  |  1 -
 src/components/range/range.ts       | 16 +++++++--
 src/components/range/range.wp.scss  |  1 -
 6 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 demos/range/index.ts
 create mode 100644 demos/range/main.html

diff --git a/demos/range/index.ts b/demos/range/index.ts
new file mode 100644
index 0000000000..96de5bbeb4
--- /dev/null
+++ b/demos/range/index.ts
@@ -0,0 +1,15 @@
+import {App} from 'ionic-angular';
+
+@App({
+  templateUrl: 'main.html'
+})
+class ApiDemoApp {
+  brightness: number = 20;
+  saturation: number = 0;
+  warmth: number = 1300;
+  structure: any = {lower: 33, upper: 60};
+
+  onChange(ev) {
+    console.log("Changed", ev);
+  }
+}
diff --git a/demos/range/main.html b/demos/range/main.html
new file mode 100644
index 0000000000..41d961c304
--- /dev/null
+++ b/demos/range/main.html
@@ -0,0 +1,54 @@
+<ion-toolbar>
+  <ion-title>Range</ion-title>
+</ion-toolbar>
+
+<ion-content class="outer-content">
+  <ion-list>
+    <ion-list-header>
+      Brightness
+      <ion-badge item-right>{{brightness}}</ion-badge>
+    </ion-list-header>
+    <ion-item>
+      <ion-icon item-left small name="sunny"></ion-icon>
+      <ion-range [(ngModel)]="brightness"></ion-range>
+      <ion-icon item-right name="sunny"></ion-icon>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Saturation
+      <ion-badge item-right secondary>{{saturation}}</ion-badge>
+    </ion-list-header>
+    <ion-item>
+      <ion-note item-left>-200</ion-note>
+      <ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary></ion-range>
+      <ion-note item-right>200</ion-note>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Warmth
+      <ion-badge item-right danger>{{warmth}}</ion-badge>
+    </ion-list-header>
+    <ion-item>
+      <ion-icon item-left small danger name="thermometer"></ion-icon>
+      <ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger></ion-range>
+      <ion-icon item-right danger name="thermometer"></ion-icon>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Structure
+      <ion-badge item-right dark>{{structure.lower}}</ion-badge>
+      <ion-badge item-right dark>{{structure.upper}}</ion-badge>
+    </ion-list-header>
+    <ion-item>
+      <ion-note item-left>0</ion-note>
+      <ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark></ion-range>
+      <ion-note item-right>100</ion-note>
+    </ion-item>
+  </ion-list>
+</ion-content>
diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss
index 02e1994ea8..7b383663f1 100644
--- a/src/components/range/range.ios.scss
+++ b/src/components/range/range.ios.scss
@@ -48,7 +48,6 @@ ion-range {
   position: relative;
   display: block;
 
-  margin-top: -8px;
   padding: $range-ios-padding;
 }
 
@@ -173,7 +172,8 @@ ion-range {
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
   ion-range[#{$color-name}] {
-    .range-bar-active {
+    .range-bar-active,
+    .range-tick-active {
       background: $color-base;
     }
   }
diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss
index d06cb7f17b..4d0849edd5 100644
--- a/src/components/range/range.md.scss
+++ b/src/components/range/range.md.scss
@@ -46,7 +46,6 @@ ion-range {
   position: relative;
   display: block;
 
-  margin-top: -16px;
   padding: $range-md-padding;
 }
 
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 3249b02777..16cca5ae1c 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -10,7 +10,19 @@ import {pointerCoord} from '../../util/dom';
 const RANGE_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Range), multi: true});
 
-
+/**
+ * @name Range
+ * @description
+ * The Range slider lets users select from a range of values by moving
+ * the slider knob.
+ *
+ *
+ *
+ *
+ *
+ *
+ * @demo /docs/v2/demos/range/
+ */
 @Component({
   selector: '.range-knob-handle',
   template:
@@ -231,7 +243,7 @@ export class Range {
   /**
    * @output {Range} Expression to evaluate when the range value changes.
    */
-  @Output() rangeChange: EventEmitter<Range> = new EventEmitter();
+  @Output() ionChange: EventEmitter<Range> = new EventEmitter();
 
 
   constructor(
diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss
index 0c78e6a1ad..7f5d1dcf19 100644
--- a/src/components/range/range.wp.scss
+++ b/src/components/range/range.wp.scss
@@ -47,7 +47,6 @@ ion-range {
   position: relative;
   display: block;
 
-  margin-top: -16px;
   padding: $range-wp-padding;
 }