diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
index cbee8797ac72..eacab1bebe0b 100644
--- a/src/dev-app/theme.scss
+++ b/src/dev-app/theme.scss
@@ -43,8 +43,6 @@ $candy-app-theme: theming.light-theme((
 @include all-theme.angular-material-mdc-theme($candy-app-theme);
 @include column-resize.theme($candy-app-theme);
 @include popover-edit.theme($candy-app-theme);
-// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
-@include slider-theme.theme($candy-app-theme);
 
 .demo-strong-focus {
   // Include base styles for strong focus indicators.
diff --git a/src/material-experimental/mdc-slider/_slider-theme.scss b/src/material-experimental/mdc-slider/_slider-theme.scss
index 696dc36b6ecc..fa3828428607 100644
--- a/src/material-experimental/mdc-slider/_slider-theme.scss
+++ b/src/material-experimental/mdc-slider/_slider-theme.scss
@@ -1,6 +1,9 @@
+@use 'sass:map';
+
 @use '@material/slider/slider' as mdc-slider;
 @use '@material/slider/slider-theme';
 @use '@material/theme/variables' as theme-variables;
+@use '@material/theme/theme' as mdc-theme;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/ripple/ripple';
 @use '../../material/core/theming/theming';
@@ -107,15 +110,16 @@
     ),
     $query: mdc-helpers.$mat-theme-styles-query
   );
-  @include ripple.theme((
+  $ripple-color: map.get(theme-variables.$property-values, $color);
+  @include ripple.color((
     foreground: (
-      base: theme-variables.prop-value($color)
+      base: $ripple-color
     ),
   ));
   .mat-mdc-slider-hover-ripple {
-    background-color: rgba(theme-variables.prop-value($color), 0.05);
+    background-color: rgba($ripple-color, 0.05);
   }
   .mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
-    background-color: rgba(theme-variables.prop-value($color), 0.2);
+    background-color: rgba($ripple-color, 0.2);
   }
 }