feat(range): add ability to add labels to the left/right of range

using `range-left` and `range-right` inside of `ion-range` will place
the element to the left or right of the range.

references #5422

src/components.core.scss

@@ -22,6 +22,7 @@
   "components/menu/menu",
   "components/modal/modal",
   "components/popover/popover",
+  "components/range/range",
   "components/refresher/refresher",
   "components/scroll/scroll",
   "components/show-hide-when/show-hide-when",

src/components/icon/icon.scss

@@ -12,4 +12,5 @@ ion-icon {
 
 ion-icon[small] {
   font-size: 1.1em;
+  min-height: 1.1em;
 }

src/components/range/range.ios.scss

@@ -32,37 +32,30 @@ $range-ios-pin-color:                         $text-ios-color !default;
 $range-ios-pin-font-size:                     12px !default;
 $range-ios-pin-padding:                       8px !default;
 
-.item-range .item-inner {
-  overflow: visible;
-}
-
-.item-range .input-wrapper {
-  overflow: visible;
-
-  flex-direction: column;
-}
-
-.item-range ion-range {
-  width: 100%;
-}
 
 ion-range {
-  position: relative;
-  display: block;
-
   padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
 }
 
+[range-left],
+[range-right] {
+  margin: 0 12px;
+}
+
+[range-left] {
+  margin-left: 0;
+}
+
+[range-right] {
+  margin-right: 0;
+}
+
 .range-has-pin {
   padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size;
 }
 
 .range-slider {
-  position: relative;
-
   height: $range-ios-slider-height;
-
-  cursor: pointer;
 }
 
 .range-bar {

src/components/range/range.md.scss

@@ -31,24 +31,7 @@ $range-md-pin-font-size:                     12px !default;
 $range-md-pin-padding:                       8px !default;
 
 
-.item-range .item-inner {
-  overflow: visible;
-}
-
-.item-range .input-wrapper {
-  overflow: visible;
-
-  flex-direction: column;
-}
-
-.item-range ion-range {
-  width: 100%;
-}
-
 ion-range {
-  position: relative;
-  display: block;
-
   padding: $range-md-padding-vertical $range-md-padding-horizontal;
 }
 
@@ -57,11 +40,7 @@ ion-range {
 }
 
 .range-slider {
-  position: relative;
-
   height: $range-md-slider-height;
-
-  cursor: pointer;
 }
 
 .range-bar {

src/components/range/range.scss

@@ -0,0 +1,42 @@
+@import "../../globals.core";
+
+// Range
+// --------------------------------------------------
+
+.item-range .item-inner {
+  overflow: visible;
+}
+
+.item-range .input-wrapper {
+  overflow: visible;
+
+  flex-direction: column;
+}
+
+.item-range ion-range {
+  width: 100%;
+}
+
+ion-range {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  ion-label {
+    flex: initial;
+  }
+
+  ion-icon {
+    min-height: 2.4rem;
+    font-size: 2.4rem;
+    line-height: 1;
+  }
+}
+
+.range-slider {
+  position: relative;
+
+  flex: 1;
+
+  cursor: pointer;
+}

src/components/range/range.ts

@@ -106,6 +106,13 @@ export class RangeKnob {
  * the slider knob. It can accept dual knobs, but by default one knob
  * controls the value of the range.
  *
+ * ### Range Labels
+ * Labels can be placed on either side of the range by adding the
+ * `range-left` or `range-right` property to the element. The element
+ * doesn't have to be an `ion-label`, it can be added to any element
+ * to place it to the left or right of the range. See [usage](#usage)
+ * below for examples.
+ *
  *
  * ### Minimum and Maximum Values
  * Minimum and maximum values can be passed to the range through the `min`
@@ -135,15 +142,18 @@ export class RangeKnob {
  *   </ion-item>
  *
  *   <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-range min="-200" max="200" [(ngModel)]="saturation" secondary>
+ *       <ion-label range-left>-200</ion-label>
+ *       <ion-label range-right>200</ion-label>
+ *     </ion-range>
  *   </ion-item>
  *
- *   <ion-item>
- *     <ion-label>step=2, {{singleValue3}}</ion-label>
- *     <ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3"></ion-range>
- *   </ion-item>
+ *  <ion-item>
+ *    <ion-range min="20" max="80" step="2" [(ngModel)]="brightness">
+ *      <ion-icon small range-left name="sunny"></ion-icon>
+ *      <ion-icon range-right name="sunny"></ion-icon>
+ *    </ion-range>
+ *  </ion-item>
  *
  *   <ion-item>
  *     <ion-label>step=100, snaps, {{singleValue4}}</ion-label>
@@ -163,13 +173,15 @@ export class RangeKnob {
 @Component({
   selector: 'ion-range',
   template:
+    '<ng-content select="[range-left]"></ng-content>' +
     '<div class="range-slider" #slider>' +
       '<div class="range-tick" *ngFor="let t of _ticks" [style.left]="t.left" [class.range-tick-active]="t.active"></div>' +
       '<div class="range-bar"></div>' +
       '<div class="range-bar range-bar-active" [style.left]="_barL" [style.right]="_barR" #bar></div>' +
       '<div class="range-knob-handle"></div>' +
       '<div class="range-knob-handle" [upper]="true" *ngIf="_dual"></div>' +
-    '</div>',
+    '</div>' +
+    '<ng-content select="[range-right]"></ng-content>',
   host: {
     '[class.range-disabled]': '_disabled',
     '[class.range-pressed]': '_pressed',

src/components/range/range.wp.scss

@@ -32,24 +32,7 @@ $range-wp-pin-font-size:                     12px !default;
 $range-wp-pin-padding:                       8px !default;
 
 
-.item-range .item-inner {
-  overflow: visible;
-}
-
-.item-range .input-wrapper {
-  overflow: visible;
-
-  flex-direction: column;
-}
-
-.item-range ion-range {
-  width: 100%;
-}
-
 ion-range {
-  position: relative;
-  display: block;
-
   padding: $range-wp-padding-vertical $range-wp-padding-horizontal;
 }
 
@@ -58,11 +41,7 @@ ion-range {
 }
 
 .range-slider {
-  position: relative;
-
   height: $range-wp-slider-height;
-
-  cursor: pointer;
 }
 
 .range-bar {

src/components/range/test/basic/index.ts

@@ -1,7 +1,8 @@
-import {App, Page} from '../../../../../src';
+import {Component} from '@angular/core';
+import {ionicBootstrap} from '../../../../../src';
 
 
-@Page({
+@Component({
   templateUrl: 'page1.html'
 })
 class Page1 {
@@ -18,10 +19,11 @@ class Page1 {
 
 }
 
-
-@App({
+@Component({
   templateUrl: 'main.html'
 })
 class E2EApp {
   rootPage = Page1;
 }
+
+ionicBootstrap(E2EApp);

src/components/range/test/basic/page1.html

@@ -28,15 +28,19 @@
     </ion-item>
 
     <ion-item>
-      <div item-left>{{singleValue2}}</div>
       <ion-label>init=150, min=-200, max=200</ion-label>
-      <ion-range min="-200" max="200" [(ngModel)]="singleValue2" secondary></ion-range>
-      <div item-right>{{singleValue2}}</div>
+      <ion-range min="-200" max="200" [(ngModel)]="singleValue2" secondary>
+        <ion-label range-left>-200</ion-label>
+        <ion-label range-right>200</ion-label>
+      </ion-range>
     </ion-item>
 
     <ion-item>
       <ion-label>step=2, {{singleValue3}}</ion-label>
-      <ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3"></ion-range>
+      <ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3">
+        <ion-icon small range-left name="sunny"></ion-icon>
+        <ion-icon range-right name="sunny"></ion-icon>
+      </ion-range>
     </ion-item>
 
     <ion-item>