fix(material-experimental/mdc-slider): code review changes

* move tick-mark-active-color into _custom-slider-color to ensure it uses the correct on-color
* add an -color arg to _custom-slider-color so we don't just use on-primary for everything
* added more examples to mdc-slider-demo.html to make a pretty example from these changes

Author: wagnermaciel

src/dev-app/mdc-slider/mdc-slider-demo.html

@@ -1,4 +1,32 @@
-<mat-slider min="-5" max="0" discrete showTickMarks>
-  <input matSliderStartThumb>
-  <input matSliderEndThumb>
+<p>Color: Primary</p>
+<mat-slider color="primary" discrete showTickMarks>
+  <input value="25" matSliderStartThumb>
+  <input value="75" matSliderEndThumb>
+</mat-slider>
+
+<mat-slider color="primary" discrete showTickMarks disabled>
+  <input value="25" matSliderStartThumb>
+  <input value="75" matSliderEndThumb>
+</mat-slider>
+
+<p>Color: Accent</p>
+<mat-slider color="accent" discrete showTickMarks>
+  <input value="25" matSliderStartThumb>
+  <input value="75" matSliderEndThumb>
+</mat-slider>
+
+<mat-slider color="accent" discrete showTickMarks disabled>
+  <input value="25" matSliderStartThumb>
+  <input value="75" matSliderEndThumb>
+</mat-slider>
+
+<p>Color: Warn</p>
+<mat-slider color="warn" discrete showTickMarks>
+  <input value="25" matSliderStartThumb>
+  <input value="75" matSliderEndThumb>
+</mat-slider>
+
+<mat-slider color="warn" discrete showTickMarks disabled>
+  <input value="25" matSliderStartThumb>
+  <input value="75" matSliderEndThumb>
 </mat-slider>

src/material-experimental/mdc-slider/_slider-theme.scss

@@ -23,25 +23,18 @@
           $color: $indicator-text-color,
           $query: $mat-theme-styles-query
         );
-        @include tick-mark-active-color(
-          $color-or-map: (
-            default: on-primary,
-            disabled: on-primary,
-          ),
-          $query: $mat-theme-styles-query
-        );
       }
 
       &.mat-primary {
-        @include _custom-slider-color(primary);
+        @include _custom-slider-color(primary, on-primary);
       }
 
       &.mat-accent {
-        @include _custom-slider-color(secondary);
+        @include _custom-slider-color(secondary, on-secondary);
       }
 
       &.mat-warn {
-        @include _custom-slider-color(error);
+        @include _custom-slider-color(error, on-error);
       }
     }
   }
@@ -75,7 +68,7 @@
   }
 }
 
-@mixin _custom-slider-color($color) {
+@mixin _custom-slider-color($color, $on-color) {
   @include thumb-color(
     $color-or-map: (
       default: $color,
@@ -97,10 +90,17 @@
     ),
     $query: $mat-theme-styles-query
   );
+  @include tick-mark-active-color(
+    $color-or-map: (
+      default: $on-color,
+      disabled: $on-color,
+    ),
+    $query: $mat-theme-styles-query
+  );
   @include tick-mark-inactive-color(
     $color-or-map: (
       default: $color,
-      disabled: on-primary,
+      disabled: $on-color,
     ),
     $query: $mat-theme-styles-query
   );