@@ -501,19 +501,101 @@ DOM and CSS of the components, you may need to tweak some of your application's
501
501
* The label is closer to the enabled toggle
502
502
503
503
### Slider
504
- <!-- TODO(wagnermaciel): review -->
505
504
506
505
* Sliders now work with mobile device screen readers.
507
506
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
+
508
592
* To accommodate range sliders, the implementation has changed from the ` <mat-slider> ` element being
509
593
the form control to the ` <mat-slider> ` element containing 1-2 ` <input> ` elements (the slider
510
594
"thumbs") that act as the form control(s). The value, associated events (` input ` , ` change ` ), and
511
595
labels (` aria-label ` ) now live on the ` <input> ` elements instead.
512
596
513
597
* 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.
517
599
518
600
### Snack Bar
519
601
0 commit comments