Skip to content

Commit f1266fa

Browse files
devversiondevversion
committed
prototype(slider): create prototype slider based on MDC web
1 parent aad4260 commit f1266fa

22 files changed

+2172
-21
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,6 @@
101101
# Note to implementer: please repossess
102102
/src/material-experimental/mdc-radio/** @mmalerba
103103
/src/material-experimental/mdc-slide-toggle/** @crisbeto
104-
# Note to implementer: please repossess
105104
/src/material-experimental/mdc-slider/** @devversion
106105
/src/material-experimental/mdc-tabs/** @crisbeto
107106
/src/material-experimental/mdc-sidenav/** @crisbeto
@@ -161,6 +160,7 @@
161160
# Note to implementer: please repossess
162161
/src/dev-app/mdc-radio/** @mmalerba
163162
/src/dev-app/mdc-slide-toggle/** @crisbeto
163+
/src/dev-app/mdc-slider/** @devversion
164164
/src/dev-app/mdc-tabs/** @crisbeto
165165
/src/dev-app/menu/** @crisbeto
166166
/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
@@ -78,6 +78,7 @@ export class DevAppLayout {
7878
{name: 'MDC Radio', route: '/mdc-radio'},
7979
{name: 'MDC Tabs', route: '/mdc-tabs'},
8080
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
81+
{name: 'MDC Slider', route: '/mdc-slider'},
8182

8283
];
8384

‎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
@@ -67,6 +67,7 @@ const MATERIAL_EXPERIMENTAL_PACKAGES = [
6767
'mdc-menu',
6868
'mdc-radio',
6969
'mdc-slide-toggle',
70+
'mdc-slider',
7071
'popover-edit',
7172
];
7273

‎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-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-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("//:packages.bzl", "ANGULAR_LIBRARY_UMDS")
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: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
package(default_visibility = ["//visibility:public"])
22

33
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
4-
load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_web_test_suite")
4+
load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite")
55
load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
66

77
ng_module(
@@ -14,29 +14,59 @@ ng_module(
1414
module_name = "@angular/material-experimental/mdc-slider",
1515
deps = [
1616
"//src/material/core",
17+
"@npm//@angular/forms",
18+
"@npm//@material/slider",
1719
],
1820
)
1921

2022
sass_library(
21-
name = "slider_scss_lib",
23+
name = "mdc_slider_scss_lib",
2224
srcs = glob(["**/_*.scss"]),
2325
deps = [
2426
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
25-
"//src/material/core:core_scss_lib",
2627
],
2728
)
2829

2930
sass_binary(
3031
name = "slider_scss",
3132
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+
],
3261
)
3362

3463
ng_web_test_suite(
3564
name = "unit_tests",
3665
static_files = ["@npm//:node_modules/@material/slider/dist/mdc.slider.js"],
3766
deps = [
38-
# TODO: add slider tests target here.
67+
":slider_tests_lib",
3968
"//src/material-experimental:mdc_require_config.js",
69+
"//src/material-experimental/mdc-slider/harness:tests_lib",
4070
],
4171
)
4272

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
11
@import '../mdc-helpers/mdc-helpers';
2+
@import '@material/slider/mixins';
23

34
@mixin mat-slider-theme-mdc($theme) {
45
@include mat-using-mdc-theme($theme) {
5-
// TODO: MDC theme styles here.
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+
}
617
}
718
}
819

920
@mixin mat-slider-typography-mdc($config) {
1021
@include mat-using-mdc-typography($config) {
11-
// TODO: MDC typography styles here.
22+
@include mdc-slider-core-styles($query: $mat-typography-styles-query);
1223
}
1324
}

‎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/slider.e2e.spec.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
// TODO: copy tests from existing mat-slider, update as necessary to fix.

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,13 @@
1-
<!-- TODO: MDC template here. -->
1+
<div class="mdc-slider__track-container">
2+
<div class="mdc-slider__track" #track></div>
3+
<div class="mdc-slider__track-marker-container" #trackMarker></div>
4+
</div>
5+
<div class="mdc-slider__thumb-container" #thumbContainer>
6+
<div *ngIf="thumbLabel" class="mdc-slider__pin">
7+
<span class="mdc-slider__pin-value-marker">{{displayValue}}</span>
8+
</div>
9+
<svg class="mdc-slider__thumb" focusable="false" width="21" height="21">
10+
<circle cx="10.5" cy="10.5" r="7.875"></circle>
11+
</svg>
12+
<div class="mdc-slider__focus-ring"></div>
13+
</div>

0 commit comments

Comments
 (0)