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
ionic-team · Jun 1, 2016 · fc819dd · fc819dd
1 parent 03f4511
commit fc819dd
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 94 deletions.
diff --git a/demos/range/index.ts b/demos/range/index.ts
@@ -1,6 +1,7 @@
-import {App} from 'ionic-angular';
+import {Component} from '@angular/core';
+import {ionicBootstrap} from 'ionic-angular';
 
-@App({
+@Component({
   templateUrl: 'main.html'
 })
 class ApiDemoApp {
@@ -13,3 +14,5 @@ class ApiDemoApp {
     console.log("Changed", ev);
   }
 }
+
+ionicBootstrap(ApiDemoApp);
diff --git a/demos/range/main.html b/demos/range/main.html
@@ -9,9 +9,10 @@
       <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-range [(ngModel)]="brightness">
+        <ion-icon range-left small name="sunny"></ion-icon>
+        <ion-icon range-right name="sunny"></ion-icon>
+      </ion-range>
     </ion-item>
   </ion-list>
 
@@ -21,9 +22,10 @@
       <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-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary>
+        <ion-label range-left>-200</ion-label>
+        <ion-label range-right>200</ion-label>
+      </ion-range>
     </ion-item>
   </ion-list>
 
@@ -33,9 +35,10 @@
       <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-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger>
+        <ion-icon range-left small danger name="thermometer"></ion-icon>
+        <ion-icon range-right danger name="thermometer"></ion-icon>
+      </ion-range>
     </ion-item>
   </ion-list>
 
@@ -46,9 +49,10 @@
       <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-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark>
+        <ion-label range-left>-0</ion-label>
+        <ion-label range-right>100</ion-label>
+      </ion-range>
     </ion-item>
   </ion-list>
 </ion-content>

diff --git a/scripts/demos/index.template.dev.html b/scripts/demos/index.template.dev.html
@@ -10,9 +10,13 @@
   <link md-href="../output.md.css" rel="stylesheet">
   <link wp-href="../output.wp.css" rel="stylesheet">
   <script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script>
+
   <script src="../../js/es6-shim.min.js"></script>
   <script src="../../js/es6-module-loader.src.js"></script>
+  <script src="../../js/Reflect.js"></script>
+  <script src="../../js/zone.js"></script>
   <script src="../../js/system.src.js"></script>
+
   <script>
   System.config({
     map: {
@@ -36,12 +40,8 @@
   });
   </script>
 
-  <script src="../../js/zone.js"></script>
-  <script src="../../js/Reflect.js"></script>
-
-  <script src="../../js/Rx.js"></script>
-
   <script src="../../bundles/ionic.system.js"></script>
+  <script src="../../js/Rx.js"></script>
 </head>
 <body>
   <ion-app>

diff --git a/src/components.core.scss b/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",

diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
@@ -12,4 +12,5 @@ ion-icon {
 
 ion-icon[small] {
   font-size: 1.1em;
+  min-height: 1.1em;
 }
diff --git a/src/components/range/range.ios.scss b/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;
+ion-range {
+  padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
 }
 
-.item-range ion-range {
-  width: 100%;
+[range-left],
+[range-right] {
+  margin: 0 12px;
 }
 
-ion-range {
-  position: relative;
-  display: block;
+[range-left] {
+  margin-left: 0;
+}
 
-  padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
+[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 {

diff --git a/src/components/range/range.md.scss b/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 {

diff --git a/src/components/range/range.scss b/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;
+}
diff --git a/src/components/range/range.ts b/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',

diff --git a/src/components/range/range.wp.scss b/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 {

diff --git a/src/components/range/test/basic/index.ts b/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);
diff --git a/src/components/range/test/basic/page1.html b/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>