Skip to content

Commit 6d263de

Browse files
devversiondevversion
committed
prototype(slider): create prototype slider based on MDC web
1 parent 859c595 commit 6d263de

18 files changed

+2160
-13
lines changed

‎.github/CODEOWNERS

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@
100100
# Note to implementer: please repossess
101101
/src/material-experimental/mdc-radio/** @mmalerba
102102
/src/material-experimental/mdc-slide-toggle/** @crisbeto
103+
/src/material-experimental/mdc-slider/** @devversion
103104
/src/material-experimental/mdc-tabs/** @crisbeto
104105
/src/material-experimental/mdc-sidenav/** @crisbeto
105106
/src/material-experimental/mdc-theming/** @mmalerba
@@ -158,6 +159,7 @@
158159
# Note to implementer: please repossess
159160
/src/dev-app/mdc-radio/** @mmalerba
160161
/src/dev-app/mdc-slide-toggle/** @crisbeto
162+
/src/dev-app/mdc-slider/** @devversion
161163
/src/dev-app/mdc-tabs/** @crisbeto
162164
/src/dev-app/menu/** @crisbeto
163165
/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/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/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.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ System.config({
147147
'dist/packages/material-experimental/mdc-radio/index.js',
148148
'@angular/material-experimental/mdc-slide-toggle':
149149
'dist/packages/material-experimental/mdc-slide-toggle/index.js',
150+
'@angular/material-experimental/mdc-slider':
151+
'dist/packages/material-experimental/mdc-slider/index.js',
150152
'@angular/material-experimental/mdc-tabs':
151153
'dist/packages/material-experimental/mdc-tabs/index.js',
152154
'@angular/material-experimental/mdc-helpers':

‎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: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@
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;
18+
$mat-animation-styles-query: animation;
1619

1720
// Mappings between Angular Material and MDC's typography levels.
1821
$mat-typography-level-mappings: (

‎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,28 +14,58 @@ 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+
"//src/material/testing",
59+
"@npm//@angular/forms",
60+
"@npm//@angular/platform-browser",
61+
],
3262
)
3363

3464
ng_web_test_suite(
3565
name = "unit_tests",
3666
static_files = ["@npm//:node_modules/@material/slider/dist/mdc.slider.js"],
3767
deps = [
38-
# TODO: add slider tests target here.
68+
":slider_tests_lib",
3969
"//src/material-experimental:mdc_require_config.js",
4070
],
4171
)

‎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/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" 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>

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

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,34 @@
1-
// TODO: MDC core styles here.
1+
@import '@material/slider/mixins';
2+
@import '../mdc-helpers/mdc-helpers';
3+
4+
$mat-slider-min-size: 128px !default;
5+
$mat-slider-horizontal-margin: 8px !default;
6+
7+
@include mdc-slider-core-styles($query: $mat-base-styles-without-animation-query);
8+
9+
.mat-mdc-slider {
10+
display: inline-block;
11+
box-sizing: border-box;
12+
outline: none;
13+
vertical-align: middle;
14+
margin: {
15+
left: $mat-slider-horizontal-margin;
16+
right: $mat-slider-horizontal-margin;
17+
}
18+
19+
// Unset the default "width" property from the MDC slider class. We don't want
20+
// the slider to automatically expand horizontally for backwards compatibility.
21+
width: auto;
22+
min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);
23+
}
24+
25+
.mat-mdc-slider:not(._mat-animation-noopable) {
26+
@include mdc-slider-core-styles($query: $mat-animation-styles-query);
27+
}
28+
29+
// Sliders without a thumb label (aka non-discrete) currently cannot have ticks
30+
// enabled. This breaks backwards compatibility with the standard Angular Material
31+
// slider, so we manually ensure that ticks can be rendered.
32+
.mat-slider-has-ticks:not(.mat-slider-disabled) .mdc-slider__track-marker-container {
33+
visibility: visible;
34+
}

0 commit comments

Comments
 (0)