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

0 commit comments

Comments
 (0)