Skip to content

feat(material-experimental/mdc-slider): rebuild the mdc-slider demo #22445

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 9, 2021
Merged

feat(material-experimental/mdc-slider): rebuild the mdc-slider demo #22445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2df7f61
feat(material-experimental/mdc-slider): rebuild the mdc-slider demo
wagnermaciel Apr 9, 2021
9d71d2e
fixup! feat(material-experimental/mdc-slider): rebuild the mdc-slider…
wagnermaciel Apr 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 77 additions & 21 deletions src/dev-app/mdc-slider/mdc-slider-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,88 @@
<p>Color: Primary</p>
<mat-slider color="primary" discrete showTickMarks>
<input value="25" matSliderStartThumb>
<input value="75" matSliderEndThumb>
<h1>Default Slider</h1>
<span>Label</span>
<mat-slider>
<input #slidey matSliderThumb>
</mat-slider>
{{slidey.value}}

<mat-slider color="primary" discrete showTickMarks disabled>
<input value="25" matSliderStartThumb>
<input value="75" matSliderEndThumb>
<h1>Colors</h1>
<mat-slider color="primary" discrete>
<input value="50" matSliderThumb>
</mat-slider>
<mat-slider color="accent" discrete>
<input value="50" matSliderThumb>
</mat-slider>
<mat-slider color="warn">
<input value="50" matSliderThumb>
</mat-slider>

<h1>Slider with Min and Max</h1>
<input [(ngModel)]="min" type="number">
<mat-slider [min]="min" [max]="max" step="5" discrete showTickMarks>
<input #slider2 matSliderThumb>
</mat-slider>
{{slider2.value}}
<input [(ngModel)]="max" type="number">

<h1>Disabled Slider</h1>
<mat-slider disabled [step]="1">
<input [(ngModel)]="disabledValue" matSliderThumb>
</mat-slider>
<input [(ngModel)]="disabledValue" type="number">

<h1>Slider with set value</h1>
<mat-slider>
<input value="43" matSliderThumb>
</mat-slider>

<p>Color: Accent</p>
<mat-slider color="accent" discrete showTickMarks>
<input value="25" matSliderStartThumb>
<input value="75" matSliderEndThumb>
<h1>Slider with step defined</h1>
<mat-slider min="1" max="100" step="20">
<input #slider5 matSliderThumb>
</mat-slider>
{{slider5.value}}

<mat-slider color="accent" discrete showTickMarks disabled>
<input value="25" matSliderStartThumb>
<input value="75" matSliderEndThumb>
<h1>Slider with set tick interval</h1>
<mat-slider discrete showTickMarks>
<input matSliderThumb>
</mat-slider>
<mat-slider step="9" discrete showTickMarks>
<input matSliderThumb>
</mat-slider>

<h1>Slider with Thumb Label</h1>
<mat-slider discrete>
<input matSliderThumb>
</mat-slider>

<h1>Slider with one-way binding</h1>
<mat-slider step="10">
<input [value]="val" matSliderThumb>
</mat-slider>
<input [(ngModel)]="val" type="number">

<h1>Slider with two-way binding</h1>
<mat-slider step="40">
<input [(ngModel)]="demo" matSliderThumb>
</mat-slider>
<input [(ngModel)]="demo" type="number">

<p>Color: Warn</p>
<mat-slider color="warn" discrete showTickMarks>
<input value="25" matSliderStartThumb>
<input value="75" matSliderEndThumb>
<h1>Set/lost focus to show thumblabel programmatically</h1>
<mat-slider discrete>
<input #demoSlider="matSliderThumb" matSliderThumb>
</mat-slider>
<button (click)="demoSlider.focus()">Focus Slider</button>
<button (click)="demoSlider.blur()">Blur Slider</button>

<mat-tab-group>
<mat-tab label="One">
<mat-slider min="1" max="5">
<input value="3" matSliderThumb>
</mat-slider>
</mat-tab>
</mat-tab-group>

<mat-slider color="warn" discrete showTickMarks disabled>
<input value="25" matSliderStartThumb>
<input value="75" matSliderEndThumb>
<h1>Range slider</h1>
<mat-slider min="200" max="500" step="100" discrete showTickMarks>
<input value="300" matSliderStartThumb>
<input value="400" matSliderEndThumb>
</mat-slider>
9 changes: 8 additions & 1 deletion src/dev-app/mdc-slider/mdc-slider-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,12 @@ import {Component} from '@angular/core';
@Component({
selector: 'mdc-slider-demo',
templateUrl: 'mdc-slider-demo.html',
styles: ['.mat-mdc-slider { display: inline-block; width: 300px; }'],
})
export class MdcSliderDemo {}
export class MdcSliderDemo {
demo: number;
val: number = 50;
min: number = 0;
max: number = 100;
disabledValue = 0;
}
9 changes: 9 additions & 0 deletions src/material-experimental/mdc-slider/slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,7 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
*/
@Directive({
selector: 'input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]',
exportAs: 'matSliderThumb',
host: {
'class': 'mdc-slider__input',
'type': 'range',
Expand Down Expand Up @@ -423,6 +424,14 @@ export class MatSliderThumb implements AfterViewInit, ControlValueAccessor, OnIn
this._slider._updateDisabled();
}

focus(): void {
this._hostElement.focus();
}

blur(): void {
this._hostElement.blur();
}

/** Returns true if this slider input currently has focus. */
_isFocused(): boolean {
return this._document.activeElement === this._hostElement;
Expand Down