Skip to content

Commit 2e30ab0

Browse files
wagnermacielwagnermaciel
committed
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 c4eb418 commit 2e30ab0

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,23 +1,42 @@
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+
@use '@material/slider/slider-theme';
33
@use '../mdc-helpers/mdc-helpers';
4+
@use '../../material/core/ripple/ripple';
45
@use '../../material/core/theming/theming';
56

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

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

1838
&.mat-warn {
19-
// TODO: disabled until we implement the new MDC slider.
20-
// @include mdc-slider-color-accessible(error, $mat-theme-styles-query);
39+
@include _custom-slider-color(error, on-error);
2140
}
2241
}
2342
}
@@ -26,8 +45,7 @@
2645
@mixin typography($config-or-theme) {
2746
$config: theming.get-typography-config($config-or-theme);
2847
@include mdc-helpers.mat-using-mdc-typography($config) {
29-
// TODO: disabled until we implement the new MDC slider.
30-
// @include mdc-slider-core-styles($query: $mat-typography-styles-query);
48+
@include mdc-slider.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
3149
}
3250
}
3351

@@ -52,3 +70,45 @@
5270
}
5371
}
5472

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

‎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)