diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html
index 88eab53625d9..c739dc146193 100644
--- a/src/demo-app/slider/slider-demo.html
+++ b/src/demo-app/slider/slider-demo.html
@@ -2,6 +2,11 @@
Default Slider
Label
{{slidey.value}}
+Colors
+
+
+
+
Slider with Min and Max
diff --git a/src/lib/slider/_slider-theme.scss b/src/lib/slider/_slider-theme.scss
index e7a84d4b05b3..87d83bbc8ca9 100644
--- a/src/lib/slider/_slider-theme.scss
+++ b/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,
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index d2d312e485e6..f246cc46bc3d 100644
--- a/src/lib/slider/slider.ts
+++ b/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();