diff --git a/demos/range/index.ts b/demos/range/index.ts
index 96de5bbeb43..c31b54cdbe3 100644
--- 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
index 306f4f4112a..2803d69670f 100644
--- a/demos/range/main.html
+++ b/demos/range/main.html
@@ -9,9 +9,10 @@
{{brightness}}
-
-
-
+
+
+
+
@@ -21,9 +22,10 @@
{{saturation}}
- -200
-
- 200
+
+ -200
+ 200
+
@@ -33,9 +35,10 @@
{{warmth}}
-
-
-
+
+
+
+
@@ -46,9 +49,10 @@
{{structure.upper}}
- 0
-
- 100
+
+ -0
+ 100
+
diff --git a/scripts/demos/index.template.dev.html b/scripts/demos/index.template.dev.html
index 630bbcd43e0..d4201f7f605 100644
--- a/scripts/demos/index.template.dev.html
+++ b/scripts/demos/index.template.dev.html
@@ -10,9 +10,13 @@
+
+
+
+
-
-
-
-
-
+
diff --git a/src/components.core.scss b/src/components.core.scss
index 719e70881ed..05279b43a9a 100644
--- 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
index 4d37f559c46..77e16c3e8d1 100644
--- 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
index 818d9fa2803..b01accf5721 100644
--- a/src/components/range/range.ios.scss
+++ b/src/components/range/range.ios.scss
@@ -32,25 +32,22 @@ $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 {
@@ -58,11 +55,7 @@ ion-range {
}
.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
index 03dae9e5022..823e24178e8 100644
--- 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
new file mode 100644
index 00000000000..33e32fdfa26
--- /dev/null
+++ 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
index c149abd34ee..0621de9d91c 100644
--- 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 {
*
*
*
- * -200
- *
- * 200
+ *
+ * -200
+ * 200
+ *
*
*
- *
- * step=2, {{singleValue3}}
- *
- *
+ *
+ *
+ *
+ *
+ *
+ *
*
*
* step=100, snaps, {{singleValue4}}
@@ -163,13 +173,15 @@ export class RangeKnob {
@Component({
selector: 'ion-range',
template:
+ '' +
'' +
'
' +
'
' +
'
' +
'
' +
'
' +
- '
{{singleValue2}}
init=150, min=-200, max=200
-
- {{singleValue2}}
+
+ -200
+ 200
+
step=2, {{singleValue3}}
-
+
+
+
+