Skip to content

Commit 2f295ba

Browse files
devversiondevversion
committed
prototype(slider): create prototype slider based on MDC web
1 parent 962b183 commit 2f295ba

File tree

19 files changed

+2158
-21
lines changed

19 files changed

+2158
-21
lines changed

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@
100100
# Note to implementer: please repossess
101101
/src/material-experimental/mdc-radio/** @mmalerba
102102
/src/material-experimental/mdc-slide-toggle/** @crisbeto
103-
# Note to implementer: please repossess
104103
/src/material-experimental/mdc-slider/** @devversion
105104
/src/material-experimental/mdc-tabs/** @crisbeto
106105
/src/material-experimental/mdc-sidenav/** @crisbeto
@@ -160,6 +159,7 @@
160159
# Note to implementer: please repossess
161160
/src/dev-app/mdc-radio/** @mmalerba
162161
/src/dev-app/mdc-slide-toggle/** @crisbeto
162+
/src/dev-app/mdc-slider/** @devversion
163163
/src/dev-app/mdc-tabs/** @crisbeto
164164
/src/dev-app/menu/** @crisbeto
165165
/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(

0 commit comments

Comments
 (0)