fix(range): fix styling on range, add demo

references #5422

Author: brandyscarney

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);
+  }
+}

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>

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;
     }
   }

src/components/range/range.md.scss

@@ -46,7 +46,6 @@ ion-range {
   position: relative;
   display: block;
 
-  margin-top: -16px;
   padding: $range-md-padding;
 }
 

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(

src/components/range/range.wp.scss

@@ -47,7 +47,6 @@ ion-range {
   position: relative;
   display: block;
 
-  margin-top: -16px;
   padding: $range-wp-padding;
 }