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

@@ -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);
 }

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);

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>