Skip to content

Commit ff94f9d

Browse files
devversionjelbourn
devversion
authored and
jelbourn
committed
prototype(slider): create prototype slider based on MDC web (#16795)
1 parent 94c71b0 commit ff94f9d

27 files changed

+2312
-8
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@
104104
# Note to implementer: please repossess
105105
/src/material-experimental/mdc-radio/** @mmalerba
106106
/src/material-experimental/mdc-slide-toggle/** @crisbeto
107-
# Note to implementer: please repossess
108107
/src/material-experimental/mdc-slider/** @devversion
109108
/src/material-experimental/mdc-tabs/** @crisbeto
110109
/src/material-experimental/mdc-sidenav/** @crisbeto
@@ -164,6 +163,7 @@
164163
# Note to implementer: please repossess
165164
/src/dev-app/mdc-radio/** @mmalerba
166165
/src/dev-app/mdc-slide-toggle/** @crisbeto
166+
/src/dev-app/mdc-slider/** @devversion
167167
/src/dev-app/mdc-tabs/** @crisbeto
168168
/src/dev-app/menu/** @crisbeto
169169
/src/dev-app/overlay/** @jelbourn @crisbeto

‎packages.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ MATERIAL_EXPERIMENTAL_PACKAGES = [
9696
"mdc-menu",
9797
"mdc-radio",
9898
"mdc-slide-toggle",
99+
"mdc-slider",
99100
"popover-edit",
100101
]
101102

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ ng_module(
4848
"//src/dev-app/mdc-menu",
4949
"//src/dev-app/mdc-radio",
5050
"//src/dev-app/mdc-slide-toggle",
51+
"//src/dev-app/mdc-slider",
5152
"//src/dev-app/mdc-tabs",
5253
"//src/dev-app/menu",
5354
"//src/dev-app/paginator",

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export class DevAppLayout {
7979
{name: 'MDC Radio', route: '/mdc-radio'},
8080
{name: 'MDC Tabs', route: '/mdc-tabs'},
8181
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
82+
{name: 'MDC Slider', route: '/mdc-slider'},
8283

8384
];
8485

‎src/dev-app/dev-app/routes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export const DEV_APP_ROUTES: Routes = [
6262
path: 'mdc-slide-toggle',
6363
loadChildren: 'mdc-slide-toggle/mdc-slide-toggle-demo-module#MdcSlideToggleDemoModule'
6464
},
65+
{path: 'mdc-slider', loadChildren: 'mdc-slider/mdc-slider-demo-module#MdcSliderDemoModule'},
6566
{path: 'mdc-tabs', loadChildren: 'mdc-tabs/mdc-tabs-demo-module#MdcTabsDemoModule'},
6667
{path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'},
6768
{path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'},

‎src/dev-app/mdc-slider/BUILD.bazel

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//tools:defaults.bzl", "ng_module")
4+
5+
ng_module(
6+
name = "mdc-slider",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"mdc-slider-demo.html",
10+
],
11+
deps = [
12+
"//src/material-experimental/mdc-slider",
13+
"//src/material/tabs",
14+
"@npm//@angular/forms",
15+
"@npm//@angular/router",
16+
],
17+
)

‎src/dev-app/mdc-slider/mdc-slider-demo-module.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {FormsModule} from '@angular/forms';
11+
import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
12+
import {MatTabsModule} from '@angular/material/tabs';
13+
import {RouterModule} from '@angular/router';
14+
import {MdcSliderDemo} from './mdc-slider-demo';
15+
16+
@NgModule({
17+
imports: [
18+
FormsModule,
19+
MatSliderModule,
20+
MatTabsModule,
21+
RouterModule.forChild([{path: '', component: MdcSliderDemo}]),
22+
],
23+
declarations: [MdcSliderDemo],
24+
})
25+
export class MdcSliderDemoModule {
26+
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<h1>Default Slider</h1>
2+
Label <mat-slider #slidey aria-label="Basic slider"></mat-slider>
3+
{{slidey.value}}
4+
5+
<h1>Colors</h1>
6+
<mat-slider color="primary" value="50" thumbLabel aria-label="Primary color slider"></mat-slider>
7+
<mat-slider color="accent" value="50" thumbLabel aria-label="Accent color slider"></mat-slider>
8+
<mat-slider color="warn" value="50" thumbLabel aria-label="Warn color slider"></mat-slider>
9+
10+
<h1>Slider with Min and Max</h1>
11+
<input [(ngModel)]="min" type="number">
12+
<mat-slider [min]="min" [max]="max" tickInterval="5" #slider2 aria-label="Min & max slider">
13+
</mat-slider>
14+
{{slider2.value}}
15+
<input [(ngModel)]="max" type="number">
16+
17+
<h1>Disabled Slider</h1>
18+
<mat-slider disabled [(ngModel)]="disabledValue" [tickInterval]="1" aria-label="Disabled slider">
19+
</mat-slider>
20+
<input [(ngModel)]="disabledValue" type="number">
21+
22+
<h1>Slider with set value</h1>
23+
<mat-slider value="43" aria-label="Initial value slider"></mat-slider>
24+
25+
<h1>Slider with step defined</h1>
26+
<mat-slider min="1" max="100" step="20" #slider5 aria-label="Slider with step"></mat-slider>
27+
{{slider5.value}}
28+
29+
<h1>Slider with set tick interval</h1>
30+
<mat-slider tickInterval="auto" aria-label="Slider with auto ticks"></mat-slider>
31+
<mat-slider tickInterval="9" aria-label="Slider with ticks"></mat-slider>
32+
33+
<h1>Slider with Thumb Label</h1>
34+
<mat-slider thumbLabel aria-label="Slider with thumb label"></mat-slider>
35+
36+
<h1>Slider with one-way binding</h1>
37+
<mat-slider [value]="val" step="40" aria-label="Slider with value binding"></mat-slider>
38+
<input [(ngModel)]="val" type="number">
39+
40+
<h1>Slider with two-way binding</h1>
41+
<mat-slider [(ngModel)]="demo" step="40" aria-label="Slider with ngModel"></mat-slider>
42+
<input [(ngModel)]="demo" type="number">
43+
44+
<h1>Set/lost focus to show thumblabel programmatically</h1>
45+
<mat-slider #demoSlider="matSlider" thumbLabel aria-label="Slider with thumb label"></mat-slider>
46+
<button (click)="demoSlider.focus()">Focus Slider</button>
47+
<button (click)="demoSlider.blur()">Blur Slider</button>
48+
49+
<mat-tab-group>
50+
<mat-tab label="One">
51+
<mat-slider min="1" max="5" value="3" aria-label="Slider in a tab"></mat-slider>
52+
</mat-tab>
53+
</mat-tab-group>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
11+
12+
@Component({
13+
moduleId: module.id,
14+
selector: 'mdc-slider-demo',
15+
templateUrl: 'mdc-slider-demo.html',
16+
})
17+
export class MdcSliderDemo {
18+
demo: number;
19+
val: number = 50;
20+
min: number = 0;
21+
max: number = 100;
22+
disabledValue = 0;
23+
}

‎src/dev-app/system-config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ var MATERIAL_EXPERIMENTAL_PACKAGES = [
6969
'mdc-menu',
7070
'mdc-radio',
7171
'mdc-slide-toggle',
72+
'mdc-slider',
7273
'popover-edit',
7374
];
7475

‎src/dev-app/theme.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@import '../material-experimental/mdc-menu/mdc-menu';
88
@import '../material-experimental/mdc-radio/mdc-radio';
99
@import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
10+
@import '../material-experimental/mdc-slider/mdc-slider';
1011
@import '../material-experimental/mdc-tabs/mdc-tabs';
1112
@import '../material-experimental/popover-edit/popover-edit';
1213

@@ -25,6 +26,7 @@
2526
@include mat-menu-typography-mdc(mat-typography-config());
2627
@include mat-radio-typography-mdc(mat-typography-config());
2728
@include mat-slide-toggle-typography-mdc(mat-typography-config());
29+
@include mat-slider-typography-mdc(mat-typography-config());
2830
@include mat-tabs-typography-mdc(mat-typography-config());
2931

3032
// Define the default theme (same as the example above).
@@ -43,6 +45,7 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
4345
@include mat-menu-theme-mdc($candy-app-theme);
4446
@include mat-radio-theme-mdc($candy-app-theme);
4547
@include mat-slide-toggle-theme-mdc($candy-app-theme);
48+
@include mat-slider-theme-mdc($candy-app-theme);
4649
@include mat-tabs-theme-mdc($candy-app-theme);
4750
@include mat-popover-edit-theme($candy-app-theme);
4851
@include mat-edit-typography(mat-typography-config());
@@ -67,6 +70,7 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
6770
@include mat-menu-theme-mdc($dark-theme);
6871
@include mat-radio-theme-mdc($dark-theme);
6972
@include mat-slide-toggle-theme-mdc($dark-theme);
73+
@include mat-slider-theme-mdc($dark-theme);
7074
@include mat-tabs-theme-mdc($dark-theme);
7175
@include mat-popover-edit-theme($dark-theme);
7276
}

‎src/e2e-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ load("//tools:defaults.bzl", "ng_module")
88
exports_files([
99
"protractor.conf.js",
1010
"start-devserver.js",
11+
"devserver-configure.js",
1112
])
1213

1314
ng_module(

‎src/material-experimental/mdc-helpers/_mdc-helpers.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111

1212
// A set of standard queries to use with MDC's queryable mixins.
1313
$mat-base-styles-query: mdc-feature-without(mdc-feature-any(color, typography));
14+
$mat-base-styles-without-animation-query:
15+
mdc-feature-all($mat-base-styles-query, mdc-feature-without(animation));
1416
$mat-theme-styles-query: color;
1517
$mat-typography-styles-query: typography;
1618

‎src/material-experimental/mdc-slider/BUILD.bazel

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
4+
load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite")
5+
load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
6+
7+
ng_module(
8+
name = "mdc-slider",
9+
srcs = glob(
10+
["**/*.ts"],
11+
exclude = ["**/*.spec.ts"],
12+
),
13+
assets = [":slider_scss"] + glob(["**/*.html"]),
14+
module_name = "@angular/material-experimental/mdc-slider",
15+
deps = [
16+
"//src/material/core",
17+
"@npm//@angular/forms",
18+
"@npm//@material/slider",
19+
],
20+
)
21+
22+
sass_library(
23+
name = "mdc_slider_scss_lib",
24+
srcs = glob(["**/_*.scss"]),
25+
deps = [
26+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
27+
],
28+
)
29+
30+
sass_binary(
31+
name = "slider_scss",
32+
src = "slider.scss",
33+
include_paths = [
34+
"external/npm/node_modules",
35+
],
36+
deps = [
37+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
38+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
39+
],
40+
)
41+
42+
###########
43+
# Testing
44+
###########
45+
46+
ng_test_library(
47+
name = "slider_tests_lib",
48+
srcs = glob(
49+
["**/*.spec.ts"],
50+
exclude = ["**/*.e2e.spec.ts"],
51+
),
52+
deps = [
53+
":mdc-slider",
54+
"//src/cdk/bidi",
55+
"//src/cdk/keycodes",
56+
"//src/cdk/platform",
57+
"//src/cdk/testing",
58+
"@npm//@angular/forms",
59+
"@npm//@angular/platform-browser",
60+
],
61+
)
62+
63+
ng_web_test_suite(
64+
name = "unit_tests",
65+
static_files = ["@npm//:node_modules/@material/slider/dist/mdc.slider.js"],
66+
deps = [
67+
":slider_tests_lib",
68+
"//src/material-experimental:mdc_require_config.js",
69+
"//src/material-experimental/mdc-slider/harness:tests_lib",
70+
],
71+
)
72+
73+
ng_e2e_test_library(
74+
name = "e2e_test_sources",
75+
srcs = glob(["**/*.e2e.spec.ts"]),
76+
deps = [
77+
"//src/cdk/private/testing/e2e",
78+
],
79+
)
80+
81+
e2e_test_suite(
82+
name = "e2e_tests",
83+
deps = [
84+
":e2e_test_sources",
85+
"//src/cdk/private/testing/e2e",
86+
],
87+
)

‎src/material-experimental/mdc-slider/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This is a placeholder for the MDC-based implementation of slider.

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import '../mdc-helpers/mdc-helpers';
2+
@import '@material/slider/mixins';
3+
4+
@mixin mat-slider-theme-mdc($theme) {
5+
@include mat-using-mdc-theme($theme) {
6+
@include mdc-slider-core-styles($query: $mat-theme-styles-query);
7+
8+
.mat-mdc-slider {
9+
&.mat-primary {
10+
@include mdc-slider-color-accessible(primary, $mat-theme-styles-query);
11+
}
12+
13+
&.mat-warn {
14+
@include mdc-slider-color-accessible(error, $mat-theme-styles-query);
15+
}
16+
}
17+
}
18+
}
19+
20+
@mixin mat-slider-typography-mdc($config) {
21+
@include mat-using-mdc-typography($config) {
22+
@include mdc-slider-core-styles($query: $mat-typography-styles-query);
23+
}
24+
}

‎src/material-experimental/mdc-slider/harness/BUILD.bazel

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
package(default_visibility = ["//visibility:public"])
22

3-
load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
3+
load("//tools:defaults.bzl", "ng_test_library", "ts_library")
44

55
ts_library(
66
name = "harness",
@@ -15,7 +15,7 @@ ts_library(
1515
)
1616

1717
ng_test_library(
18-
name = "harness_tests",
18+
name = "tests_lib",
1919
srcs = glob(["**/*.spec.ts"]),
2020
deps = [
2121
":harness",
@@ -24,8 +24,3 @@ ng_test_library(
2424
"//src/material/slider",
2525
],
2626
)
27-
28-
ng_web_test_suite(
29-
name = "tests",
30-
deps = [":harness_tests"],
31-
)

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
export * from './public-api';

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {CommonModule} from '@angular/common';
10+
import {NgModule} from '@angular/core';
11+
import {MatCommonModule} from '@angular/material/core';
12+
import {MatSlider} from './slider';
13+
14+
@NgModule({
15+
imports: [MatCommonModule, CommonModule],
16+
exports: [MatSlider, MatCommonModule],
17+
declarations: [MatSlider],
18+
})
19+
export class MatSliderModule {
20+
}

0 commit comments

Comments
 (0)