feat(slider): add theme color support (#3766)

Author: mmalerba

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

@@ -2,6 +2,11 @@ <h1>Default Slider</h1>
 Label <md-slider #slidey></md-slider>
 {{slidey.value}}
 
+<h1>Colors</h1>
+<md-slider color="primary" value="50" thumbLabel></md-slider>
+<md-slider color="accent" value="50" thumbLabel></md-slider>
+<md-slider color="warn" value="50" thumbLabel></md-slider>
+
 <h1>Slider with Min and Max</h1>
 <input [(ngModel)]="min">
 <md-slider [min]="min" [max]="max" tickInterval="5" #slider2></md-slider>

src/lib/slider/_slider-theme.scss

@@ -3,7 +3,9 @@
 
 
 @mixin mat-slider-theme($theme) {
+  $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
 
   $mat-slider-off-color: rgba(black, 0.26);
   $mat-slider-off-focused-color: rgba(black, 0.38);
@@ -17,24 +19,38 @@
     background-color: $mat-slider-off-color;
   }
 
-  .mat-slider-track-fill {
-    background-color: mat-color($accent);
+  .mat-slider-track-fill,
+  .mat-slider-thumb,
+  .mat-slider-thumb-label {
+    .mat-primary & {
+      background-color: mat-color($primary);
+    }
+
+    .mat-accent & {
+      background-color: mat-color($accent);
+    }
+
+    .mat-warn & {
+      background-color: mat-color($warn);
+    }
   }
 
   .mat-slider-focus-ring {
     background-color: $mat-slider-focus-ring-color;
   }
 
-  .mat-slider-thumb {
-    background-color: mat-color($accent);
-  }
+  .mat-slider-thumb-label-text {
+    .mat-primary & {
+      color: mat-color($primary, default-contrast);
+    }
 
-  .mat-slider-thumb-label {
-    background-color: mat-color($accent);
-  }
+    .mat-accent & {
+      color: mat-color($accent, default-contrast);
+    }
 
-  .mat-slider-thumb-label-text {
-    color: mat-color($accent, default-contrast);
+    .mat-warn & {
+      color: mat-color($warn, default-contrast);
+    }
   }
 
   .mat-slider:hover,

src/lib/slider/slider.ts

@@ -84,6 +84,9 @@ export class MdSliderChange {
     '[attr.aria-valuemax]': 'max',
     '[attr.aria-valuemin]': 'min',
     '[attr.aria-valuenow]': 'value',
+    '[class.mat-primary]': 'color == "primary"',
+    '[class.mat-accent]': 'color != "primary" && color != "warn"',
+    '[class.mat-warn]': 'color == "warn"',
     '[class.mat-slider-disabled]': 'disabled',
     '[class.mat-slider-has-ticks]': 'tickInterval',
     '[class.mat-slider-horizontal]': '!vertical',
@@ -204,6 +207,8 @@ export class MdSlider implements ControlValueAccessor, OnDestroy {
   set vertical(value: any) { this._vertical = coerceBooleanProperty(value); }
   private _vertical = false;
 
+  @Input() color: 'primary' | 'accent' | 'warn' = 'accent';
+
   /** Event emitted when the slider value has changed. */
   @Output() change = new EventEmitter<MdSliderChange>();