fix(range): add slot margins (#16464)

This adds margins between the range slider and its slotted content, such as labels or icons.
ionic-team · Nov 27, 2018 · 69f63b3 · 69f63b3
1 parent 723d17b
commit 69f63b3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git 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
@@ -34,14 +34,13 @@
   color: current-color(contrast);
 }
 
-// TODO: REVIEW
-// .range-md [slot="range-start"] {
-//   @include margin(0, 12px, 0, 0);
-// }
-
-// .range-md [slot="range-end"] {
-//   @include margin(0, 0, 0, 12px);
-// }
+::slotted([slot="start"]) {
+  @include margin(0, 14px, 0, 0);
+}
+
+::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
@@ -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>