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

references #5422

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