diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss
index 823e24178e..7eef7e356a 100644
--- a/src/components/range/range.md.scss
+++ b/src/components/range/range.md.scss
@@ -35,6 +35,19 @@ ion-range {
   padding: $range-md-padding-vertical $range-md-padding-horizontal;
 }
 
+[range-left],
+[range-right] {
+  margin: 0 12px;
+}
+
+[range-left] {
+  margin-left: 0;
+}
+
+[range-right] {
+  margin-right: 0;
+}
+
 .range-has-pin {
   padding-top: $range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding;
 }
diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss
index ab6d0de6a1..3d595e1092 100644
--- a/src/components/range/range.wp.scss
+++ b/src/components/range/range.wp.scss
@@ -36,6 +36,19 @@ ion-range {
   padding: $range-wp-padding-vertical $range-wp-padding-horizontal;
 }
 
+[range-left],
+[range-right] {
+  margin: 0 12px;
+}
+
+[range-left] {
+  margin-left: 0;
+}
+
+[range-right] {
+  margin-right: 0;
+}
+
 .range-has-pin {
   padding-top: $range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding;
 }