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 + +