From 520c24602a6c81737a360a9175f579944b69165c Mon Sep 17 00:00:00 2001
From: Yousaf Nawaz <engr.yousafnawaz@gmail.com>
Date: Mon, 3 Jan 2022 19:00:27 +0500
Subject: [PATCH 1/2] docs(material/slider): adjust CSS of configurable slider
 example

modify CSS of configurable slider example to adjust according to device
---
 .../slider-configurable-example.css                    |  7 +++++--
 .../slider-configurable-example.html                   | 10 +++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css
index ba363902eaae..561a8cf6768b 100644
--- a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css
+++ b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css
@@ -4,17 +4,20 @@
 
 .example-section {
   display: flex;
+  flex-wrap: wrap;
   align-content: center;
   align-items: center;
-  height: 60px;
 }
 
 .example-margin {
   margin: 8px;
 }
+.example-width {
+  width: min(calc(100% - 16px), 300px);
+}
 
 .mat-slider-horizontal {
-  width: 300px;
+  width: min(calc(100% - 16px), 300px);
 }
 
 .mat-slider-vertical {
diff --git a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.html b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.html
index 4e55e6c868cd..9b5ca493b6d9 100644
--- a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.html
+++ b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.html
@@ -3,19 +3,19 @@
     <h2 class="example-h2">Slider configuration</h2>
 
     <section class="example-section">
-      <mat-form-field class="example-margin" appearance="fill">
+      <mat-form-field class="example-margin example-width" appearance="fill">
         <mat-label>Value</mat-label>
         <input matInput type="number" [(ngModel)]="value">
       </mat-form-field>
-      <mat-form-field class="example-margin" appearance="fill">
+      <mat-form-field class="example-margin example-width" appearance="fill">
         <mat-label>Min value</mat-label>
         <input matInput type="number" [(ngModel)]="min">
       </mat-form-field>
-      <mat-form-field class="example-margin" appearance="fill">
+      <mat-form-field class="example-margin example-width" appearance="fill">
         <mat-label>Max value</mat-label>
         <input matInput type="number" [(ngModel)]="max">
       </mat-form-field>
-      <mat-form-field class="example-margin" appearance="fill">
+      <mat-form-field class="example-margin example-width" appearance="fill">
         <mat-label>Step size</mat-label>
         <input matInput type="number" [(ngModel)]="step">
       </mat-form-field>
@@ -26,7 +26,7 @@ <h2 class="example-h2">Slider configuration</h2>
       <mat-checkbox class="example-margin" [(ngModel)]="autoTicks" *ngIf="showTicks">
         Auto ticks
       </mat-checkbox>
-      <mat-form-field class="example-margin" appearance="fill" *ngIf="showTicks && !autoTicks">
+      <mat-form-field class="example-margin example-width" appearance="fill" *ngIf="showTicks && !autoTicks">
         <mat-label>Tick interval</mat-label>
         <input matInput type="number" [(ngModel)]="tickInterval">
       </mat-form-field>

From 46fcc6726dd49ae1199e5aab9083ee7ffa141b94 Mon Sep 17 00:00:00 2001
From: Yousaf Nawaz <engr.yousafnawaz@gmail.com>
Date: Tue, 4 Jan 2022 12:50:39 +0500
Subject: [PATCH 2/2] docs(material/slider): adjust CSS of configurable slider
 example

modify CSS of configurable slider example to adjust according to device
---
 .../slider-configurable/slider-configurable-example.css     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css
index 561a8cf6768b..d99a67b786cb 100644
--- a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css
+++ b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css
@@ -13,11 +13,13 @@
   margin: 8px;
 }
 .example-width {
-  width: min(calc(100% - 16px), 300px);
+  max-width: 180px;
+  width: 100%;
 }
 
 .mat-slider-horizontal {
-  width: min(calc(100% - 16px), 300px);
+  max-width: 300px;
+  width: 100%;
 }
 
 .mat-slider-vertical {