docs(material/slider): apply a11y guidance (#22494)

- update configurable example to
  - have useful labels and use `aria-labelledby`
  - have labels that work in horizontal and vertical modes
- add `aria-label` to other examples
- add `step` to formatting example

Fixes #7933

(cherry picked from commit a0a77d7)

Author: Splaktar

src/components-examples/material/slider/slider-configurable/slider-configurable-example.css

@@ -28,3 +28,23 @@
 .example-result-card h2 {
   margin: 0 8px;
 }
+
+.example-result-card .example-label-container.example-label-horizontal {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 12px 16px;
+  max-width: 284px;
+}
+
+.example-result-card .example-label-container.example-label-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 68px;
+  height: 48px;
+}
+
+.example-result-card .example-value-label {
+  font-weight: 600;
+}

src/components-examples/material/slider/slider-configurable/slider-configurable-example.html

@@ -51,7 +51,13 @@ <h2 class="example-h2">Slider configuration</h2>
 <mat-card class="example-result-card">
   <mat-card-content>
     <h2>Result</h2>
+    <br>
+    <br>
 
+    <div class="example-label-container" [class]="vertical ? 'example-label-vertical' : 'example-label-horizontal'">
+      <label id="example-name-label" class="example-name-label">Max Value</label>
+      <label class="example-value-label">{{value}}</label>
+    </div>
     <mat-slider
         class="example-margin"
         [disabled]="disabled"
@@ -62,7 +68,8 @@ <h2>Result</h2>
         [thumbLabel]="thumbLabel"
         [tickInterval]="getSliderTickInterval()"
         [(ngModel)]="value"
-        [vertical]="vertical">
+        [vertical]="vertical"
+        aria-labelledby="example-name-label">
     </mat-slider>
   </mat-card-content>
 </mat-card>

src/components-examples/material/slider/slider-formatting/slider-formatting-example.html

@@ -2,5 +2,7 @@
   thumbLabel
   [displayWith]="formatLabel"
   tickInterval="1000"
-  min="1"
-  max="100000"></mat-slider>
+  step="1000"
+  min="0"
+  max="100000"
+  aria-label="units"></mat-slider>

src/components-examples/material/slider/slider-harness/slider-harness-example.html

@@ -1 +1 @@
-<mat-slider value="50"></mat-slider>
+<mat-slider value="50" aria-label="unit(s)"></mat-slider>

src/components-examples/material/slider/slider-overview/slider-overview-example.html

@@ -1 +1 @@
-<mat-slider></mat-slider>
+<mat-slider aria-label="unit(s)"></mat-slider>