diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index b03b61a15f..7a103ce3ee 100644
--- a/core/src/components/range/range.md.scss
+++ b/core/src/components/range/range.md.scss
@@ -21,6 +21,10 @@
   font-size: $range-md-pin-font-size;
 }
 
+:host(.ion-color) .range-bar {
+  background: current-color(base, 0.26);
+}
+
 :host(.ion-color) .range-bar-active,
 :host(.ion-color) .range-knob,
 :host(.ion-color) .range-pin,
@@ -30,10 +34,6 @@
   color: current-color(contrast);
 }
 
-:host(.ion-color) .range-bar {
-  background: current-color(base, 0.26);
-}
-
 // TODO: REVIEW
 // .range-md [slot="range-start"] {
 //   @include margin(0, 12px, 0, 0);