Skip to content

Commit e5cbc8c

Browse files
wagnermacielwagnermaciel
authored
feat(material-experimental/mdc-slider): add slider styles (#21934)
* feat(material-experimental/mdc-slider): add slider styles * implement _MatSliderMixinBase * add color input to MatSlider * extend _MatSliderMixinBase from MatSlider * use without-ripple mixin for slider.scss * @include all other mdc-slider mixins except thumb-ripple-color in _slider-theme.scss * implement primary, accent, and warn colors in _slider-theme.scss
1 parent c8fb649 commit e5cbc8c

File tree

4 files changed

+119
-16
lines changed

4 files changed

+119
-16
lines changed

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

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,32 @@
1-
<mat-slider min="-5" max="0" discrete showTickMarks>
2-
<input matSliderStartThumb>
3-
<input matSliderEndThumb>
1+
<p>Color: Primary</p>
2+
<mat-slider color="primary" discrete showTickMarks>
3+
<input value="25" matSliderStartThumb>
4+
<input value="75" matSliderEndThumb>
5+
</mat-slider>
6+
7+
<mat-slider color="primary" discrete showTickMarks disabled>
8+
<input value="25" matSliderStartThumb>
9+
<input value="75" matSliderEndThumb>
10+
</mat-slider>
11+
12+
<p>Color: Accent</p>
13+
<mat-slider color="accent" discrete showTickMarks>
14+
<input value="25" matSliderStartThumb>
15+
<input value="75" matSliderEndThumb>
16+
</mat-slider>
17+
18+
<mat-slider color="accent" discrete showTickMarks disabled>
19+
<input value="25" matSliderStartThumb>
20+
<input value="75" matSliderEndThumb>
21+
</mat-slider>
22+
23+
<p>Color: Warn</p>
24+
<mat-slider color="warn" discrete showTickMarks>
25+
<input value="25" matSliderStartThumb>
26+
<input value="75" matSliderEndThumb>
27+
</mat-slider>
28+
29+
<mat-slider color="warn" discrete showTickMarks disabled>
30+
<input value="25" matSliderStartThumb>
31+
<input value="75" matSliderEndThumb>
432
</mat-slider>

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

Lines changed: 70 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,41 @@
1-
// TODO: disabled until we implement the new MDC slider.
2-
// @import '@material/slider/mixins.import';
1+
@use '@material/slider/slider' as mdc-slider;
2+
@import '@material/slider/slider-theme';
33
@import '../mdc-helpers/mdc-helpers';
4+
@import '../../material/core/ripple/ripple';
45

56
@mixin mat-mdc-slider-color($config-or-theme) {
67
$config: mat-get-color-config($config-or-theme);
78
@include mat-using-mdc-theme($config) {
8-
// TODO: disabled until we implement the new MDC slider.
9-
// @include mdc-slider-core-styles($query: $mat-theme-styles-query);
9+
@include mdc-slider.without-ripple($query: $mat-theme-styles-query);
1010

1111
.mat-mdc-slider {
12+
&.mat-primary, &.mat-accent, &.mat-warn {
13+
$is-dark: map-get($config, is-dark);
14+
$indicator-color: if($is-dark, white, black);
15+
$indicator-text-color: if($is-dark, black, white);
16+
$indicator-opacity: if($is-dark, 0.9, 0.6);
17+
18+
@include value-indicator-color(
19+
$color: $indicator-color,
20+
$opacity: $indicator-opacity,
21+
$query: $mat-theme-styles-query
22+
);
23+
@include value-indicator-text-color(
24+
$color: $indicator-text-color,
25+
$query: $mat-theme-styles-query
26+
);
27+
}
28+
1229
&.mat-primary {
13-
// TODO: disabled until we implement the new MDC slider.
14-
// @include mdc-slider-color-accessible(primary, $mat-theme-styles-query);
30+
@include _custom-slider-color(primary, on-primary);
31+
}
32+
33+
&.mat-accent {
34+
@include _custom-slider-color(secondary, on-secondary);
1535
}
1636

1737
&.mat-warn {
18-
// TODO: disabled until we implement the new MDC slider.
19-
// @include mdc-slider-color-accessible(error, $mat-theme-styles-query);
38+
@include _custom-slider-color(error, on-error);
2039
}
2140
}
2241
}
@@ -25,8 +44,7 @@
2544
@mixin mat-mdc-slider-typography($config-or-theme) {
2645
$config: mat-get-typography-config($config-or-theme);
2746
@include mat-using-mdc-typography($config) {
28-
// TODO: disabled until we implement the new MDC slider.
29-
// @include mdc-slider-core-styles($query: $mat-typography-styles-query);
47+
@include without-ripple($query: $mat-typography-styles-query);
3048
}
3149
}
3250

@@ -51,3 +69,45 @@
5169
}
5270
}
5371

72+
@mixin _custom-slider-color($color, $on-color) {
73+
@include thumb-color(
74+
$color-or-map: (
75+
default: $color,
76+
disabled: on-surface,
77+
),
78+
$query: $mat-theme-styles-query
79+
);
80+
@include track-active-color(
81+
$color-or-map: (
82+
default: $color,
83+
disabled: on-surface,
84+
),
85+
$query: $mat-theme-styles-query
86+
);
87+
@include track-inactive-color(
88+
$color-or-map: (
89+
default: $color,
90+
disabled: on-surface,
91+
),
92+
$query: $mat-theme-styles-query
93+
);
94+
@include tick-mark-active-color(
95+
$color-or-map: (
96+
default: $on-color,
97+
disabled: surface,
98+
),
99+
$query: $mat-theme-styles-query
100+
);
101+
@include tick-mark-inactive-color(
102+
$color-or-map: (
103+
default: $color,
104+
disabled: on-surface,
105+
),
106+
$query: $mat-theme-styles-query
107+
);
108+
@include mat-ripple-color((
109+
foreground: (
110+
base: mdc-theme-prop-value($color)
111+
),
112+
));
113+
}

‎src/material-experimental/mdc-slider/slider.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
@import '@material/slider/slider';
2-
@include core-styles;
1+
@use '@material/slider/slider' as mdc-slider;
2+
@import '../mdc-helpers/mdc-helpers';
3+
4+
@include mdc-slider.without-ripple($query: $mat-base-styles-query);
35

46
.mdc-slider {
57
display: block;

‎src/material-experimental/mdc-slider/slider.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
ViewChildren,
3333
ViewEncapsulation,
3434
} from '@angular/core';
35+
import {CanColorCtor, mixinColor} from '@angular/material/core';
3536
import {SpecificEventListener, EventType} from '@material/base';
3637
import {MDCSliderAdapter, MDCSliderFoundation, Thumb, TickMark} from '@material/slider';
3738

@@ -202,6 +203,16 @@ export class MatSliderThumb implements AfterViewInit {
202203
static ngAcceptInputType_value: NumberInput;
203204
}
204205

206+
// Boilerplate for applying mixins to MatSlider.
207+
/** @docs-private */
208+
class MatSliderBase {
209+
constructor(public _elementRef: ElementRef<HTMLElement>) {}
210+
}
211+
const _MatSliderMixinBase:
212+
CanColorCtor &
213+
typeof MatSliderBase =
214+
mixinColor(MatSliderBase, 'primary');
215+
205216
/**
206217
* Allows users to select from a range of values by moving the slider thumb. It is similar in
207218
* behavior to the native `<input type="range">` element.
@@ -220,8 +231,9 @@ export class MatSliderThumb implements AfterViewInit {
220231
exportAs: 'matSlider',
221232
changeDetection: ChangeDetectionStrategy.OnPush,
222233
encapsulation: ViewEncapsulation.None,
234+
inputs: ['color'],
223235
})
224-
export class MatSlider implements AfterViewInit, OnDestroy {
236+
export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnDestroy {
225237
/** The slider thumb(s). */
226238
@ViewChildren('thumb') _thumbs: QueryList<ElementRef<HTMLElement>>;
227239

@@ -320,6 +332,7 @@ export class MatSlider implements AfterViewInit, OnDestroy {
320332
readonly _elementRef: ElementRef<HTMLElement>,
321333
private readonly _platform: Platform,
322334
@Inject(DOCUMENT) document: any) {
335+
super(_elementRef);
323336
this._document = document;
324337
this._window = this._document.defaultView || window;
325338
}

0 commit comments

Comments
 (0)