Skip to content

Commit 92e6fba

Browse files
authored
docs: write slider section of mdc-migration guide (#25796)
* docs: write slider section of mdc-migration guide * fixup! docs: write slider section of mdc-migration guide * fixup! docs: write slider section of mdc-migration guide * fixup! docs: write slider section of mdc-migration guide * fixup! docs: write slider section of mdc-migration guide * fixup! docs: write slider section of mdc-migration guide * fixup! docs: write slider section of mdc-migration guide
1 parent da36ca7 commit 92e6fba

File tree

1 file changed

+86
-4
lines changed

1 file changed

+86
-4
lines changed

guides/v15-mdc-migration.md

Lines changed: 86 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -501,19 +501,101 @@ DOM and CSS of the components, you may need to tweak some of your application's
501501
* The label is closer to the enabled toggle
502502

503503
### Slider
504-
<!-- TODO(wagnermaciel): review -->
505504

506505
* Sliders now work with mobile device screen readers.
507506

507+
* The slider template API has changed from a single `<mat-slider>` element to a `<mat-slider>`
508+
element which contains one or two `<input>` elements (depending on whether the slider should)
509+
be a standard or range slider. E.g.
510+
```html
511+
<!-- Single slider -->
512+
<mat-slider>
513+
<input matSliderThumb>
514+
</mat-slider>
515+
516+
<!-- Range slider -->
517+
<mat-slider>
518+
<input matSliderStartThumb>
519+
<input matSliderEndThumb>
520+
</mat-slider>
521+
```
522+
523+
* The new `discrete` property on the `<mat-slider>` now controls whether the slider has tick marks
524+
and a value indicator tooltip. It replaces `thumbLabel`.
525+
526+
```html
527+
<!-- Before -->
528+
<mat-slider thumbLabel></mat-slider>
529+
530+
<!-- After -->
531+
<mat-slider discrete>
532+
<input matSliderThumb>
533+
</mat-slider>
534+
```
535+
536+
* The `tickInterval` property has been removed. To switch to the new API, use `showTickMarks` to
537+
create a slider with tick marks, and the interval for your tick marks will match your slider's
538+
`step`. The `tickInterval` property is under consideration to be added back in future releases.
539+
540+
```html
541+
<!-- Before -->
542+
<mat-slider tickInterval="5" step="5"></mat-slider>
543+
544+
<!-- After -->
545+
<mat-slider step="5" showTickMarks>
546+
<input matSliderThumb>
547+
</mat-slider>
548+
```
549+
550+
* The `displayValue` property has been removed. The suggested alternative for controlling the
551+
value indicator text is to provide a function via `displayWith`.
552+
553+
```html
554+
<!-- Before -->
555+
<mat-slider [displayValue]="myDisplayValue"></mat-slider>
556+
557+
<!-- After -->
558+
<mat-slider [displayWith]="myDisplayWithFn">
559+
<input matSliderThumb>
560+
</mat-slider>
561+
```
562+
563+
* The `valueText` property is now removed in favor of directly using the native input's
564+
aria-valuetext or providing a `displayWith` function.
565+
566+
```html
567+
<!-- Before -->
568+
<mat-slider [valueText]="myValueText"></mat-slider>
569+
570+
<!-- After (Option 1) -->
571+
<mat-slider>
572+
<input [attr.aria-valuetext]="myValueText" matSliderThumb>
573+
</mat-slider>
574+
575+
<!-- After (Option 2) -->
576+
<mat-slider [displayWith]="myDisplayWithFn">
577+
<input matSliderThumb>
578+
</mat-slider>
579+
```
580+
581+
* The slider API has also changed such that there are two new components: `MatSliderThumb` and
582+
`MatSliderRangeThumb`. They provide the following properties:
583+
- `@Input() value: number`
584+
- `@Output() valueChange: EventEmitter<number>`
585+
- `@Output() dragEnd: EventEmitter<MatSliderDragEvent>`
586+
- `@Output() dragStart: EventEmitter<MatSliderDragEvent>`
587+
- `percentage: number`
588+
And the following methods:
589+
- `blur`
590+
- `focus`
591+
508592
* To accommodate range sliders, the implementation has changed from the `<mat-slider>` element being
509593
the form control to the `<mat-slider>` element containing 1-2 `<input>` elements (the slider
510594
"thumbs") that act as the form control(s). The value, associated events (`input`, `change`), and
511595
labels (`aria-label`) now live on the `<input>` elements instead.
512596

513597
* Vertical sliders and inverted sliders are no longer supported, as they are no longer part of the
514-
Material Design spec.
515-
516-
* Range sliders are now supported. <!-- TODO(wagnermaciel): add more about this. -->
598+
Material Design spec. As a result, the `invert` and `vertical` properties have been removed.
517599

518600
### Snack Bar
519601

0 commit comments

Comments
 (0)