diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss
index 9e41cb1fe3b..d7eaa4c600a 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 7a103ce3ee1..59127f46e0d 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);
-// }
-
-// .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
index 499a1f88a8c..8722f28c87a 100644
--- a/core/src/components/range/test/basic/index.html
+++ b/core/src/components/range/test/basic/index.html
@@ -43,6 +43,12 @@
+
+
+ Start
+ End
+
+