diff --git a/src/app/showcase/doc/slider/basicdoc.ts b/src/app/showcase/doc/slider/basicdoc.ts
index d45b4774b35..29425c8a9ff 100644
--- a/src/app/showcase/doc/slider/basicdoc.ts
+++ b/src/app/showcase/doc/slider/basicdoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p>Two-way binding is defined using the standard <i>ngModel</i> directive.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-slider [(ngModel)]="value" />
+            <p-slider [(ngModel)]="value" styleClass="w-14rem" />
         </div>
         <app-code [code]="code" selector="slider-basic-demo"></app-code>
     `
@@ -17,10 +17,10 @@ export class BasicDoc {
     value!: number;
 
     code: Code = {
-        basic: `<p-slider [(ngModel)]="value" />`,
+        basic: `<p-slider [(ngModel)]="value" styleClass="w-14rem"/>`,
 
         html: `<div class="card flex justify-content-center">
-    <p-slider [(ngModel)]="value" />
+    <p-slider [(ngModel)]="value" styleClass="w-14rem"/>
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/slider/rangedoc.ts b/src/app/showcase/doc/slider/rangedoc.ts
index 90d13ef69c8..e2654694898 100644
--- a/src/app/showcase/doc/slider/rangedoc.ts
+++ b/src/app/showcase/doc/slider/rangedoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p>When <i>range</i> property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-slider [(ngModel)]="rangeValues" [range]="true" />
+            <p-slider [(ngModel)]="rangeValues" [range]="true" styleClass="w-14rem" />
         </div>
         <app-code [code]="code" selector="slider-range-demo"></app-code>
     `
@@ -17,10 +17,10 @@ export class RangeDoc {
     rangeValues: number[] = [20, 80];
 
     code: Code = {
-        basic: `<p-slider [(ngModel)]="rangeValues" [range]="true" />`,
+        basic: `<p-slider [(ngModel)]="rangeValues" [range]="true" styleClass="w-14rem" />`,
 
         html: `<div class="card flex justify-content-center">
-    <p-slider [(ngModel)]="rangeValues" [range]="true" />
+    <p-slider [(ngModel)]="rangeValues" [range]="true" styleClass="w-14rem" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/slider/reactiveformsdoc.ts b/src/app/showcase/doc/slider/reactiveformsdoc.ts
index fe904aa7e33..57056ffbfd2 100644
--- a/src/app/showcase/doc/slider/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/slider/reactiveformsdoc.ts
@@ -10,7 +10,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <form [formGroup]="formGroup">
-                <p-slider formControlName="value" />
+                <p-slider formControlName="value" styleClass="w-14rem"/>
             </form>
         </div>
         <app-code [code]="code" selector="slider-reactive-forms-demo"></app-code>
@@ -27,12 +27,12 @@ export class ReactiveFormsDoc implements OnInit {
 
     code: Code = {
         basic: `<form [formGroup]="formGroup">
-    <p-slider formControlName="value" />
+    <p-slider formControlName="value" styleClass="w-14rem" />
 </form>`,
 
         html: `<div class="card flex justify-content-center">
     <form [formGroup]="formGroup">
-        <p-slider formControlName="value" />
+        <p-slider formControlName="value" styleClass="w-14rem" />
     </form>
 </div>`,
 
diff --git a/src/app/showcase/doc/slider/stepdoc.ts b/src/app/showcase/doc/slider/stepdoc.ts
index ed6f971765c..8464c6f0283 100644
--- a/src/app/showcase/doc/slider/stepdoc.ts
+++ b/src/app/showcase/doc/slider/stepdoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p>Size of each movement is defined with the <i>step</i> property.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-slider [(ngModel)]="value" [step]="20" />
+            <p-slider [(ngModel)]="value" [step]="20" styleClass="w-14rem" />
         </div>
         <app-code [code]="code" selector="slider-step-demo"></app-code>
     `
@@ -17,10 +17,10 @@ export class StepDoc {
     value!: number;
 
     code: Code = {
-        basic: `<p-slider [(ngModel)]="value" [step]="20" />`,
+        basic: `<p-slider [(ngModel)]="value" [step]="20" styleClass="w-14rem" />`,
 
         html: `<div class="card flex justify-content-center">
-    <p-slider [(ngModel)]="value" [step]="20" />
+    <p-slider [(ngModel)]="value" [step]="20" styleClass="w-14rem" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';