From 69f63b3849b5edbe92feed628adc9ba21de2d4df Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Mon, 26 Nov 2018 18:54:15 -0600
Subject: [PATCH] fix(range): add slot margins (#16464)

This adds margins between the range slider and its slotted content, such as labels or icons.
---
 core/src/components/range/range.ios.scss        |  8 ++++++++
 core/src/components/range/range.md.scss         | 13 ++++++-------
 core/src/components/range/test/basic/index.html |  6 ++++++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss
index 9e41cb1fe3..d7eaa4c600 100644
--- a/core/src/components/range/range.ios.scss
+++ b/core/src/components/range/range.ios.scss
@@ -22,6 +22,14 @@
   background: current-color(base);
 }
 
+::slotted([slot="start"]) {
+  @include margin(0, 16px, 0, 0);
+}
+
+::slotted([slot="end"]) {
+  @include margin(0, 0, 0, 16px);
+}
+
 :host(.range-has-pin) {
   @include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null);
 }
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index 7a103ce3ee..59127f46e0 100644
--- a/core/src/components/range/range.md.scss
+++ b/core/src/components/range/range.md.scss
@@ -34,14 +34,13 @@
   color: current-color(contrast);
 }
 
-// TODO: REVIEW
-// .range-md [slot="range-start"] {
-//   @include margin(0, 12px, 0, 0);
-// }
+::slotted([slot="start"]) {
+  @include margin(0, 14px, 0, 0);
+}
 
-// .range-md [slot="range-end"] {
-//   @include margin(0, 0, 0, 12px);
-// }
+::slotted([slot="end"]) {
+  @include margin(0, 0, 0, 14px);
+}
 
 :host(.range-has-pin) {
   @include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null);
diff --git a/core/src/components/range/test/basic/index.html b/core/src/components/range/test/basic/index.html
index 499a1f88a8..8722f28c87 100644
--- a/core/src/components/range/test/basic/index.html
+++ b/core/src/components/range/test/basic/index.html
@@ -43,6 +43,12 @@
             <ion-icon name="ios-thermometer" slot="end"></ion-icon>
           </ion-range>
         </ion-item>
+        <ion-item>
+          <ion-range value="40">
+            <ion-label slot="start">Start</ion-label>
+            <ion-label slot="end">End</ion-label>
+          </ion-range>
+        </ion-item>
       </ion-list>
 
       <ion-list>