Skip to content

Commit 2d4ef51

Browse files
committed
docs: write slider section of mdc-migration guide
1 parent 94b694f commit 2d4ef51

File tree

1 file changed

+35
-3
lines changed

1 file changed

+35
-3
lines changed

guides/v15-mdc-migration.md

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -501,10 +501,44 @@ 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+
* Range sliders are now supported. A range slider uses two native slider inputs to control two
524+
multiple values.
525+
526+
* The new `discrete` property on the `<mat-slider>` now controls whether the slider has tick marks
527+
and a value indicator tooltip. It replaces `thumbLabel` and `tickInterval`.
528+
529+
* The `displayValue` property has been replaced by `displayWith`.
530+
531+
* The `<input>` elements now control the following properties:
532+
- `value`
533+
- `percent`
534+
- `defaultTabIndex` is now replaced by the native inputs tab index
535+
- `valueText` is now replaced by the native inputs aria-valuetext
536+
537+
538+
* The slider API has also changed such that there is a new Component: `MatSliderThumb`.
539+
The MatSliderThumb is the new interface for the following properties:
540+
The following
541+
508542
* To accommodate range sliders, the implementation has changed from the `<mat-slider>` element being
509543
the form control to the `<mat-slider>` element containing 1-2 `<input>` elements (the slider
510544
"thumbs") that act as the form control(s). The value, associated events (`input`, `change`), and
@@ -513,8 +547,6 @@ DOM and CSS of the components, you may need to tweak some of your application's
513547
* Vertical sliders and inverted sliders are no longer supported, as they are no longer part of the
514548
Material Design spec.
515549

516-
* Range sliders are now supported. <!-- TODO(wagnermaciel): add more about this. -->
517-
518550
### Snack Bar
519551

520552
* For simple, text-based snack-bars, there are no significant changes.

0 commit comments

Comments
 (0)