diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index 1c08062f6b50..770834ceb737 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-theme.scss
@@ -13,6 +13,18 @@
   .mat-slider-thumb-label-text {
     color: mat-color($palette, default-contrast);
   }
+
+  .mat-slider-focus-ring {
+    $opacity: 0.2;
+    $color: mat-color($palette, default, $opacity);
+    background-color: $color;
+
+    // `mat-color` uses `rgba` for the opacity which won't work with
+    // CSS variables so we need to use `opacity` as a fallback.
+    @if (type-of($color) != color) {
+      opacity: $opacity;
+    }
+  }
 }
 
 @mixin mat-slider-color($config-or-theme) {
@@ -48,18 +60,6 @@
     @include _mat-slider-inner-content-theme($warn);
   }
 
-  .mat-slider-focus-ring {
-    $opacity: 0.2;
-    $color: mat-color($accent, default, $opacity);
-    background-color: $color;
-
-    // `mat-color` uses `rgba` for the opacity which won't work with
-    // CSS variables so we need to use `opacity` as a fallback.
-    @if (type-of($color) != color) {
-      opacity: $opacity;
-    }
-  }
-
   .mat-slider:hover,
   .cdk-focused {
     .mat-slider-track-background {