diff --git a/core/src/components/progress-bar/test/basic/index.html b/core/src/components/progress-bar/test/basic/index.html
index af5de592d0..56e4f73434 100644
--- a/core/src/components/progress-bar/test/basic/index.html
+++ b/core/src/components/progress-bar/test/basic/index.html
@@ -79,18 +79,6 @@
           </ion-list-header>
           <ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
 
-          <ion-list-header>
-            <ion-label> Determinate (change progress with slider) </ion-label>
-          </ion-list-header>
-          <ion-progress-bar id="progressBar"></ion-progress-bar>
-
-          <ion-item>
-            <ion-range legacy="true" pin="true" value="0" id="progressValue">
-              <ion-label slot="start">0</ion-label>
-              <ion-label slot="end">100</ion-label>
-            </ion-range>
-          </ion-item>
-
           <ion-list-header>
             <ion-label> Buffer </ion-label>
           </ion-list-header>
@@ -105,39 +93,8 @@
             <ion-label> Buffer (without value) </ion-label>
           </ion-list-header>
           <ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
-
-          <ion-list-header>
-            <ion-label> Buffer (change buffer with slider) </ion-label>
-          </ion-list-header>
-          <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
-          <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
-
-          <ion-item>
-            <ion-range legacy="true" pin="true" value="0" id="progressValueBuffer">
-              <ion-label slot="start">0</ion-label>
-              <ion-label slot="end">100</ion-label>
-            </ion-range>
-          </ion-item>
         </ion-list>
       </ion-content>
     </ion-app>
-
-    <script>
-      // Progress Bar Value
-      const progressValue = document.getElementById('progressValue');
-      const progressBar = document.getElementById('progressBar');
-
-      progressValue.addEventListener('ionChange', function (ev) {
-        progressBar.value = ev.detail.value / 100;
-      });
-
-      // Progress Bar Buffer
-      const progressValueBuffer = document.getElementById('progressValueBuffer');
-      const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
-
-      progressValueBuffer.addEventListener('ionChange', function (ev) {
-        progressBarBuffer.forEach((ele) => (ele.buffer = ev.detail.value / 100));
-      });
-    </script>
   </body>
 </html>
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Chrome-linux.png
index 4cc6e7f771..03beb69a11 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Firefox-linux.png
index 136389d3dc..103553d02d 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Safari-linux.png
index f4a193becd..554d6c58f7 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Chrome-linux.png
index 0b9acd8a38..6299488be0 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Firefox-linux.png
index 88d1920a34..718ddc263e 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Safari-linux.png
index 9e7892cd27..3f3a9161fe 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Chrome-linux.png
index a6f311ba76..ce3224afaa 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Firefox-linux.png
index e9dfda436a..335844427d 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Safari-linux.png
index 8ba2873b51..63ae234dbc 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Chrome-linux.png
index fbb46f7a29..b77b0120ac 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Firefox-linux.png
index d76cb9c4e2..6c234f50f0 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Safari-linux.png
index 42e175bab1..135f8e2ec7 100644
Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/progress-bar/test/buffer/index.html b/core/src/components/progress-bar/test/buffer/index.html
new file mode 100644
index 0000000000..9bd1019055
--- /dev/null
+++ b/core/src/components/progress-bar/test/buffer/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Progress Bar - Buffer</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      .custom-bar-background {
+        --buffer-background: red;
+      }
+
+      .no-bar-background {
+        --buffer-background: none;
+      }
+
+      ion-content ion-progress-bar {
+        margin: 10px 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Progress Bar - Buffer</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="outer-content">
+        <ion-list>
+          <ion-list-header>
+            <ion-label> Buffer </ion-label>
+          </ion-list-header>
+          <ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Buffer (reversed) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar color="secondary" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Buffer (without value) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Buffer (change buffer with slider) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
+          <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
+
+          <ion-item>
+            <ion-range legacy="true" pin="true" value="0" id="progressValueBuffer">
+              <ion-label slot="start">0</ion-label>
+              <ion-label slot="end">100</ion-label>
+            </ion-range>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      // Progress Bar Buffer
+      const progressValueBuffer = document.getElementById('progressValueBuffer');
+      const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
+
+      progressValueBuffer.addEventListener('ionChange', function (ev) {
+        progressBarBuffer.forEach((ele) => (ele.buffer = ev.detail.value / 100));
+      });
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts
new file mode 100644
index 0000000000..7ed74f1045
--- /dev/null
+++ b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts
@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('progress-bar: buffer'), () => {
+    test.describe('with a dynamic progress value', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
+        `,
+          config
+        );
+
+        await page.setIonViewport();
+
+        const progressBar = await page.locator('ion-progress-bar');
+
+        await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8));
+
+        await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
+      });
+    });
+  });
+});
diff --git a/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a93ce7b0ac
Binary files /dev/null and b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ee968b4fff
Binary files /dev/null and b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f2184604ca
Binary files /dev/null and b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/progress-bar/test/determinate/index.html b/core/src/components/progress-bar/test/determinate/index.html
new file mode 100644
index 0000000000..2ffda64dc3
--- /dev/null
+++ b/core/src/components/progress-bar/test/determinate/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Progress Bar - Determinate</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      .custom-bar-background {
+        --buffer-background: red;
+      }
+
+      .no-bar-background {
+        --buffer-background: none;
+      }
+
+      ion-content ion-progress-bar {
+        margin: 10px 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Progress Bar - Determinate</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="outer-content">
+        <ion-list>
+          <ion-list-header>
+            <ion-label> Determinate </ion-label>
+          </ion-list-header>
+          <ion-progress-bar value="0.50"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (reversed) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar reversed="true" value="0.50"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (secondary color) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar color="secondary" value="0.50"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (with no bar background) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar class="no-bar-background" value="0.75"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (with a custom background) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
+
+          <ion-list-header>
+            <ion-label> Determinate (change progress with slider) </ion-label>
+          </ion-list-header>
+          <ion-progress-bar id="progressBar"></ion-progress-bar>
+
+          <ion-item>
+            <ion-range legacy="true" pin="true" value="0" id="progressValue">
+              <ion-label slot="start">0</ion-label>
+              <ion-label slot="end">100</ion-label>
+            </ion-range>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      // Progress Bar Value
+      const progressValue = document.getElementById('progressValue');
+      const progressBar = document.getElementById('progressBar');
+
+      progressValue.addEventListener('ionChange', function (ev) {
+        progressBar.value = ev.detail.value / 100;
+      });
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts
new file mode 100644
index 0000000000..8da6024612
--- /dev/null
+++ b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts
@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('progress-bar: determinate'), () => {
+    test.describe('with a dynamic progress value', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-progress-bar value="0.20"></ion-progress-bar>
+        `,
+          config
+        );
+
+        await page.setIonViewport();
+
+        const progressBar = await page.locator('ion-progress-bar');
+
+        await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8));
+
+        await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
+      });
+    });
+  });
+});
diff --git a/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1f954cce31
Binary files /dev/null and b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9930578e5f
Binary files /dev/null and b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4bea04aae8
Binary files /dev/null and b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png differ