Skip to content

Commit 2c220ad

Browse files
committed
docs: write slider section of mdc-migration guide
1 parent a2cf3f6 commit 2c220ad

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
@@ -512,10 +512,44 @@ DOM and CSS of the components, you may need to tweak some of your application's
512512
* The label is closer to the enabled toggle
513513

514514
### Slider
515-
<!-- TODO(wagnermaciel): review -->
516515

517516
* Sliders now work with mobile device screen readers.
518517

518+
* The slider template API has changed from a single `<mat-slider>` element to a `<mat-slider>`
519+
element which contains one or two `<input>` elements (depending on whether the slider should)
520+
be a standard or range slider. E.g.
521+
```html
522+
<!-- Single slider -->
523+
<mat-slider>
524+
<input matSliderThumb>
525+
</mat-slider>
526+
527+
<!-- Range slider -->
528+
<mat-slider>
529+
<input matSliderStartThumb>
530+
<input matSliderEndThumb>
531+
</mat-slider>
532+
```
533+
534+
* Range sliders are now supported. A range slider uses two native slider inputs to control two
535+
multiple values.
536+
537+
* The new `discrete` property on the `<mat-slider>` now controls whether the slider has tick marks
538+
and a value indicator tooltip. It replaces `thumbLabel` and `tickInterval`.
539+
540+
* The `displayValue` property has been replaced by `displayWith`.
541+
542+
* The `<input>` elements now control the following properties:
543+
- `value`
544+
- `percent`
545+
- `defaultTabIndex` is now replaced by the native inputs tab index
546+
- `valueText` is now replaced by the native inputs aria-valuetext
547+
548+
549+
* The slider API has also changed such that there is a new Component: `MatSliderThumb`.
550+
The MatSliderThumb is the new interface for the following properties:
551+
The following
552+
519553
* To accommodate range sliders, the implementation has changed from the `<mat-slider>` element being
520554
the form control to the `<mat-slider>` element containing 1-2 `<input>` elements (the slider
521555
"thumbs") that act as the form control(s). The value, associated events (`input`, `change`), and
@@ -524,8 +558,6 @@ DOM and CSS of the components, you may need to tweak some of your application's
524558
* Vertical sliders and inverted sliders are no longer supported, as they are no longer part of the
525559
Material Design spec.
526560

527-
* Range sliders are now supported. <!-- TODO(wagnermaciel): add more about this. -->
528-
529561
### Snack Bar
530562

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

0 commit comments

Comments
 (0)