Skip to content

Commit d6d28fa

Browse files
crisbetocrisbeto
committed
build: switch slider demo to use MDC
Switches the demo for the slider to use the MDC implementation.
1 parent 30d0f63 commit d6d28fa

File tree

11 files changed

+141
-141
lines changed

11 files changed

+141
-141
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@
204204
/src/dev-app/mdc-progress-bar/** @crisbeto
205205
/src/dev-app/mdc-progress-spinner/** @mmalerba
206206
/src/dev-app/mdc-slide-toggle/** @crisbeto
207-
/src/dev-app/mdc-slider/** @devversion
207+
/src/dev-app/legacy-slider/** @devversion
208208
/src/dev-app/mdc-snack-bar/** @andrewseguin
209209
/src/dev-app/mdc-tabs/** @crisbeto
210210
/src/dev-app/menu/** @crisbeto

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ ng_module(
5757
"//src/dev-app/legacy-paginator",
5858
"//src/dev-app/legacy-radio",
5959
"//src/dev-app/legacy-select",
60+
"//src/dev-app/legacy-slider",
6061
"//src/dev-app/legacy-snack-bar",
6162
"//src/dev-app/legacy-table",
6263
"//src/dev-app/legacy-tooltip",
@@ -67,7 +68,6 @@ ng_module(
6768
"//src/dev-app/mdc-progress-bar",
6869
"//src/dev-app/mdc-progress-spinner",
6970
"//src/dev-app/mdc-slide-toggle",
70-
"//src/dev-app/mdc-slider",
7171
"//src/dev-app/mdc-tabs",
7272
"//src/dev-app/menu",
7373
"//src/dev-app/menubar",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@ export class DevAppLayout {
108108
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
109109
{name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
110110
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
111-
{name: 'MDC Slider', route: '/mdc-slider'},
112111
{name: 'MDC Tabs', route: '/mdc-tabs'},
113112
{name: 'Legacy Button', route: '/legacy-button'},
114113
{name: 'Legacy Card', route: '/legacy-card'},
@@ -120,6 +119,7 @@ export class DevAppLayout {
120119
{name: 'Legacy Paginator', route: '/legacy-paginator'},
121120
{name: 'Legacy Radio', route: '/legacy-radio'},
122121
{name: 'Legacy Select', route: '/legacy-select'},
122+
{name: 'Legacy Slider', route: '/legacy-slider'},
123123
{name: 'Legacy Snack Bar', route: '/legacy-snack-bar'},
124124
{name: 'Legacy Table', route: '/legacy-table'},
125125
{name: 'Legacy Tooltip', route: '/legacy-tooltip'},

‎src/dev-app/mdc-slider/BUILD.bazel renamed to ‎src/dev-app/legacy-slider/BUILD.bazel

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@ load("//tools:defaults.bzl", "ng_module")
33
package(default_visibility = ["//visibility:public"])
44

55
ng_module(
6-
name = "mdc-slider",
6+
name = "legacy-slider",
77
srcs = glob(["**/*.ts"]),
8-
assets = [
9-
"mdc-slider-demo.html",
10-
],
8+
assets = ["legacy-slider-demo.html"],
119
deps = [
12-
"//src/material/slider",
13-
"//src/material/tabs",
10+
"//src/material/legacy-slider",
11+
"//src/material/legacy-tabs",
1412
"@npm//@angular/forms",
1513
],
1614
)

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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>Inverted slider</h1>
45+
<mat-slider invert value="50" tickInterval="5" aria-label="Inverted slider"></mat-slider>
46+
47+
<h1>Vertical slider</h1>
48+
<mat-slider vertical thumbLabel tickInterval="auto" value="50" aria-label="Vertical slider">
49+
</mat-slider>
50+
51+
<h1>Inverted vertical slider</h1>
52+
<mat-slider vertical invert thumbLabel tickInterval="auto" value="50"
53+
aria-label="Inverted vertical slider">
54+
</mat-slider>
55+
56+
<h1>Set/lost focus to show thumblabel programmatically</h1>
57+
<mat-slider #demoSlider="matSlider" thumbLabel aria-label="Slider with thumb label"></mat-slider>
58+
<button (click)="demoSlider.focus()">Focus Slider</button>
59+
<button (click)="demoSlider.blur()">Blur Slider</button>
60+
61+
<mat-tab-group>
62+
<mat-tab label="One">
63+
<mat-slider min="1" max="5" value="3" aria-label="Slider in a tab"></mat-slider>
64+
</mat-tab>
65+
</mat-tab-group>

‎src/dev-app/mdc-slider/mdc-slider-demo.ts renamed to ‎src/dev-app/legacy-slider/legacy-slider-demo.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,16 @@
88

99
import {Component} from '@angular/core';
1010
import {FormsModule} from '@angular/forms';
11-
import {MatSliderModule} from '@angular/material/slider';
12-
import {MatTabsModule} from '@angular/material/tabs';
11+
import {MatLegacySliderModule} from '@angular/material/legacy-slider';
12+
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
1313

1414
@Component({
15-
selector: 'mdc-slider-demo',
16-
templateUrl: 'mdc-slider-demo.html',
17-
styles: ['.mat-mdc-slider { width: 300px; }'],
15+
selector: 'legacy-slider-demo',
16+
templateUrl: 'legacy-slider-demo.html',
1817
standalone: true,
19-
imports: [FormsModule, MatSliderModule, MatTabsModule],
18+
imports: [FormsModule, MatLegacySliderModule, MatLegacyTabsModule],
2019
})
21-
export class MdcSliderDemo {
20+
export class LegacySliderDemo {
2221
demo: number;
2322
val: number = 50;
2423
min: number = 0;

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

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎src/dev-app/routes.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -214,8 +214,8 @@ export const DEV_APP_ROUTES: Routes = [
214214
import('./mdc-slide-toggle/mdc-slide-toggle-demo').then(m => m.MdcSlideToggleDemo),
215215
},
216216
{
217-
path: 'mdc-slider',
218-
loadComponent: () => import('./mdc-slider/mdc-slider-demo').then(m => m.MdcSliderDemo),
217+
path: 'slider',
218+
loadComponent: () => import('./slider/slider-demo').then(m => m.SliderDemo),
219219
},
220220
{
221221
path: 'legacy-table',
@@ -280,8 +280,8 @@ export const DEV_APP_ROUTES: Routes = [
280280
loadComponent: () => import('./slide-toggle/slide-toggle-demo').then(m => m.SlideToggleDemo),
281281
},
282282
{
283-
path: 'slider',
284-
loadComponent: () => import('./slider/slider-demo').then(m => m.SliderDemo),
283+
path: 'legacy-slider',
284+
loadComponent: () => import('./legacy-slider/legacy-slider-demo').then(m => m.LegacySliderDemo),
285285
},
286286
{
287287
path: 'legacy-snack-bar',

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ package(default_visibility = ["//visibility:public"])
55
ng_module(
66
name = "slider",
77
srcs = glob(["**/*.ts"]),
8-
assets = ["slider-demo.html"],
8+
assets = [
9+
"slider-demo.html",
10+
],
911
deps = [
10-
"//src/material/legacy-slider",
11-
"//src/material/legacy-tabs",
12+
"//src/material/slider",
13+
"//src/material/tabs",
1214
"@npm//@angular/forms",
1315
],
1416
)

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

Lines changed: 50 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,88 @@
11
<h1>Default Slider</h1>
2-
Label <mat-slider #slidey aria-label="Basic slider"></mat-slider>
2+
<span>Label</span>
3+
<mat-slider>
4+
<input #slidey matSliderThumb>
5+
</mat-slider>
36
{{slidey.value}}
47

58
<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+
<mat-slider color="primary" discrete>
10+
<input value="50" matSliderThumb>
11+
</mat-slider>
12+
<mat-slider color="accent" discrete>
13+
<input value="50" matSliderThumb>
14+
</mat-slider>
15+
<mat-slider color="warn">
16+
<input value="50" matSliderThumb>
17+
</mat-slider>
918

1019
<h1>Slider with Min and Max</h1>
1120
<input [(ngModel)]="min" type="number">
12-
<mat-slider [min]="min" [max]="max" tickInterval="5" #slider2 aria-label="Min & max slider">
21+
<mat-slider [min]="min" [max]="max" step="5" discrete showTickMarks>
22+
<input #slider2 matSliderThumb>
1323
</mat-slider>
1424
{{slider2.value}}
1525
<input [(ngModel)]="max" type="number">
1626

1727
<h1>Disabled Slider</h1>
18-
<mat-slider disabled [(ngModel)]="disabledValue" [tickInterval]="1" aria-label="Disabled slider">
28+
<mat-slider disabled [step]="1">
29+
<input [(ngModel)]="disabledValue" matSliderThumb>
1930
</mat-slider>
2031
<input [(ngModel)]="disabledValue" type="number">
2132

2233
<h1>Slider with set value</h1>
23-
<mat-slider value="43" aria-label="Initial value slider"></mat-slider>
34+
<mat-slider>
35+
<input value="43" matSliderThumb>
36+
</mat-slider>
2437

2538
<h1>Slider with step defined</h1>
26-
<mat-slider min="1" max="100" step="20" #slider5 aria-label="Slider with step"></mat-slider>
39+
<mat-slider min="1" max="100" step="20">
40+
<input #slider5 matSliderThumb>
41+
</mat-slider>
2742
{{slider5.value}}
2843

2944
<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>
45+
<mat-slider discrete showTickMarks>
46+
<input matSliderThumb>
47+
</mat-slider>
48+
<mat-slider step="9" discrete showTickMarks>
49+
<input matSliderThumb>
50+
</mat-slider>
3251

3352
<h1>Slider with Thumb Label</h1>
34-
<mat-slider thumbLabel aria-label="Slider with thumb label"></mat-slider>
53+
<mat-slider discrete>
54+
<input matSliderThumb>
55+
</mat-slider>
3556

3657
<h1>Slider with one-way binding</h1>
37-
<mat-slider [value]="val" step="40" aria-label="Slider with value binding"></mat-slider>
58+
<mat-slider step="10">
59+
<input [value]="val" matSliderThumb>
60+
</mat-slider>
3861
<input [(ngModel)]="val" type="number">
3962

4063
<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>Inverted slider</h1>
45-
<mat-slider invert value="50" tickInterval="5" aria-label="Inverted slider"></mat-slider>
46-
47-
<h1>Vertical slider</h1>
48-
<mat-slider vertical thumbLabel tickInterval="auto" value="50" aria-label="Vertical slider">
49-
</mat-slider>
50-
51-
<h1>Inverted vertical slider</h1>
52-
<mat-slider vertical invert thumbLabel tickInterval="auto" value="50"
53-
aria-label="Inverted vertical slider">
64+
<mat-slider step="40">
65+
<input [(ngModel)]="demo" matSliderThumb>
5466
</mat-slider>
67+
<input [(ngModel)]="demo" type="number">
5568

5669
<h1>Set/lost focus to show thumblabel programmatically</h1>
57-
<mat-slider #demoSlider="matSlider" thumbLabel aria-label="Slider with thumb label"></mat-slider>
70+
<mat-slider discrete>
71+
<input #demoSlider="matSliderThumb" matSliderThumb>
72+
</mat-slider>
5873
<button (click)="demoSlider.focus()">Focus Slider</button>
5974
<button (click)="demoSlider.blur()">Blur Slider</button>
6075

6176
<mat-tab-group>
6277
<mat-tab label="One">
63-
<mat-slider min="1" max="5" value="3" aria-label="Slider in a tab"></mat-slider>
78+
<mat-slider min="1" max="5">
79+
<input value="3" matSliderThumb>
80+
</mat-slider>
6481
</mat-tab>
6582
</mat-tab-group>
83+
84+
<h1>Range slider</h1>
85+
<mat-slider min="200" max="500" step="100" discrete showTickMarks>
86+
<input value="300" matSliderStartThumb>
87+
<input value="400" matSliderEndThumb>
88+
</mat-slider>

0 commit comments

Comments
 (0)