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();