@@ -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