fix(material/slider): incorrectly inheriting color when nested inside component with theme

The slider theme selectors were a bit too broad which meant that it
would automatically inherit the colors from a parent component,
if the Material theming classes were used somewhere up the chain
(e.g. a slider inside a tab group).

These changes use more specific selectors to avoid the issue.

Fixes #21271.

Author: crisbeto

src/material/slider/_slider-theme.scss

@@ -47,16 +47,18 @@
     background-color: $mat-slider-off-color;
   }
 
-  .mat-primary {
-    @include _mat-slider-inner-content-theme($primary);
-  }
+  .mat-slider {
+    &.mat-primary {
+      @include _mat-slider-inner-content-theme($primary);
+    }
 
-  .mat-accent {
-    @include _mat-slider-inner-content-theme($accent);
-  }
+    &.mat-accent {
+      @include _mat-slider-inner-content-theme($accent);
+    }
 
-  .mat-warn {
-    @include _mat-slider-inner-content-theme($warn);
+    &.mat-warn {
+      @include _mat-slider-inner-content-theme($warn);
+    }
   }
 
   .mat-slider:hover,