From e7d296072c34a812960b1109230b23c0a22e8a8e Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 3 Mar 2026 13:51:38 -0500
Subject: [PATCH 1/5] chore(package): update versions to dev build

---
 static/code/stackblitz/v8/angular/package.json           | 4 ++--
 static/code/stackblitz/v8/html/package.json              | 2 +-
 static/code/stackblitz/v8/react/package.json             | 4 ++--
 static/code/stackblitz/v8/vue/package.json               | 4 ++--
 static/usage/v8/range/theming/css-shadow-parts/demo.html | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
index 1b5bd920983..097203fb2a0 100644
--- a/static/code/stackblitz/v8/angular/package.json
+++ b/static/code/stackblitz/v8/angular/package.json
@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^20.0.0",
     "@angular/platform-browser-dynamic": "^20.0.0",
     "@angular/router": "^20.0.0",
-    "@ionic/angular": "8.7.14",
-    "@ionic/core": "8.7.14",
+    "@ionic/angular": "8.7.17-dev.11771959013.18adabe2",
+    "@ionic/core": "8.7.17-dev.11771959013.18adabe2",
     "ionicons": "8.0.13",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
index e0c5262152f..4a1e3a88258 100644
--- a/static/code/stackblitz/v8/html/package.json
+++ b/static/code/stackblitz/v8/html/package.json
@@ -9,7 +9,7 @@
     "start": "vite preview"
   },
   "dependencies": {
-    "@ionic/core": "8.7.14",
+    "@ionic/core": "8.7.17-dev.11771959013.18adabe2",
     "ionicons": "8.0.13"
   },
   "devDependencies": {
diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json
index bbbf6308c01..2706b371fc4 100644
--- a/static/code/stackblitz/v8/react/package.json
+++ b/static/code/stackblitz/v8/react/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "8.7.14",
-    "@ionic/react-router": "8.7.14",
+    "@ionic/react": "8.7.17-dev.11771959013.18adabe2",
+    "@ionic/react-router": "8.7.17-dev.11771959013.18adabe2",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
index dfe2750877e..df6508bb6b1 100644
--- a/static/code/stackblitz/v8/vue/package.json
+++ b/static/code/stackblitz/v8/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "8.7.14",
-    "@ionic/vue-router": "8.7.14",
+    "@ionic/vue": "8.7.17-dev.11771959013.18adabe2",
+    "@ionic/vue-router": "8.7.17-dev.11771959013.18adabe2",
     "vue": "^3.2.25",
     "vue-router": "5.0.1"
   },
diff --git a/static/usage/v8/range/theming/css-shadow-parts/demo.html b/static/usage/v8/range/theming/css-shadow-parts/demo.html
index 5ee2f25b113..530cec44444 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/demo.html
+++ b/static/usage/v8/range/theming/css-shadow-parts/demo.html
@@ -6,8 +6,8 @@
     <title>Range</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/css/ionic.bundle.css" />
     <style>
       ion-range {
         max-width: 320px;

From da3591172285fe45be9c7fef479dc78f6510e827 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 3 Mar 2026 16:39:25 -0500
Subject: [PATCH 2/5] docs(range): add new parts for dual knobs to css shadow
 parts demo

---
 .../angular/example_component_css.md          | 117 ++++++++++---
 .../angular/example_component_html.md         |  24 +++
 .../range/theming/css-shadow-parts/demo.html  | 164 +++++++++++++++---
 .../range/theming/css-shadow-parts/index.md   |   1 +
 .../theming/css-shadow-parts/javascript.md    | 159 ++++++++++++++---
 .../css-shadow-parts/react/main_css.md        | 117 ++++++++++---
 .../css-shadow-parts/react/main_tsx.md        |  36 +++-
 .../v8/range/theming/css-shadow-parts/vue.md  | 141 ++++++++++++---
 8 files changed, 640 insertions(+), 119 deletions(-)

diff --git a/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_css.md
index 0092daad827..2c6bf85e09e 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_css.md
+++ b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_css.md
@@ -1,43 +1,114 @@
 ```css
-ion-range::part(tick) {
-  background: #a2d2ff;
+/* Shared styles for all ranges */
+ion-range {
+  --knob-size: 34px;
 }
 
-ion-range::part(tick-active) {
-  background: #bde0fe;
+ion-range::part(knob) {
+  background: #fff;
+
+  box-sizing: border-box;
 }
 
-ion-range::part(pin) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+/* Hide the Material Design indicator */
+ion-range::part(knob)::before {
+  display: none;
+}
 
-  background: #ffafcc;
+ion-range::part(pin) {
   color: #fff;
-
   border-radius: 50%;
-  transform: scale(1.01);
+}
+
+ion-range::part(tick),
+ion-range::part(tick-active) {
+  height: 8px;
+  top: 17px;
+}
 
-  top: -20px;
+/* Single Knob Range */
+#range-single::part(bar),
+#range-single::part(tick) {
+  background: #bed4ff;
+}
 
-  min-width: 28px;
-  height: 28px;
-  transition: transform 120ms ease, background 120ms ease;
+#range-single::part(bar-active),
+#range-single::part(tick-active) {
+  background: #40a2fd;
 }
 
-ion-range::part(pin)::before {
-  content: none;
+#range-single::part(knob) {
+  border: 4px solid #40a2fd;
 }
 
-ion-range::part(knob) {
-  background: #ffc8dd;
+#range-single::part(knob pressed) {
+  background: #bed4ff;
+}
+
+#range-single::part(pin),
+#range-single::part(pin)::before {
+  background: #40a2fd;
+}
+
+/* Dual Knobs (A/B) Range */
+#range-a-b::part(bar-active) {
+  background: #1ea9ca;
+}
+
+#range-a-b::part(knob-a) {
+  border: 4px solid #0f8fd6;
+}
+
+#range-a-b::part(knob-a pressed) {
+  background: #cfeefe;
+}
+
+#range-a-b::part(pin-a),
+#range-a-b::part(pin-a)::before {
+  background: #0f8fd6;
+}
+
+#range-a-b::part(knob-b) {
+  border: 4px solid #2dc2bd;
+}
+
+#range-a-b::part(knob-b pressed) {
+  background: #d4f5f3;
+}
+
+#range-a-b::part(pin-b),
+#range-a-b::part(pin-b)::before {
+  background: #2dc2bd;
+}
+
+/* Dual Knobs (Lower/Upper) Range */
+#range-lower-upper::part(bar-active) {
+  background: linear-gradient(to right, #0059ff 0%, #b77bff 100%);
+}
+
+#range-lower-upper::part(knob-lower) {
+  border: 4px solid #0059ff;
+}
+
+#range-lower-upper::part(knob-lower pressed) {
+  background: #bed4ff;
+}
+
+#range-lower-upper::part(pin-lower),
+#range-lower-upper::part(pin-lower)::before {
+  background: #0059ff;
+}
+
+#range-lower-upper::part(knob-upper) {
+  border: 4px solid #b77bff;
 }
 
-ion-range::part(bar) {
-  background: #a2d2ff;
+#range-lower-upper::part(knob-upper pressed) {
+  background: #f1e5ff;
 }
 
-ion-range::part(bar-active) {
-  background: #bde0fe;
+#range-lower-upper::part(pin-upper),
+#range-lower-upper::part(pin-upper)::before {
+  background: #b77bff;
 }
 ```
diff --git a/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_html.md
index d8b5aad8076..eaee00e99c6 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_html.md
+++ b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_html.md
@@ -1,5 +1,7 @@
 ```html
+<h2>Single Knob</h2>
 <ion-range
+  id="range-single"
   aria-label="Custom range"
   [min]="0"
   [max]="10"
@@ -8,4 +10,26 @@
   [ticks]="true"
   [snaps]="true"
 ></ion-range>
+
+<h2>Dual Knobs (A/B)</h2>
+<ion-range
+  id="range-a-b"
+  aria-label="Custom dual knob range with A/B styling"
+  [min]="0"
+  [max]="10"
+  [value]="{lower: 3, upper: 7}"
+  [dualKnobs]="true"
+  [pin]="true"
+></ion-range>
+
+<h2>Dual Knobs (Lower/Upper)</h2>
+<ion-range
+  id="range-lower-upper"
+  aria-label="Custom dual knob range with lower/upper styling"
+  [min]="0"
+  [max]="10"
+  [value]="{lower: 3, upper: 7}"
+  [dualKnobs]="true"
+  [pin]="true"
+></ion-range>
 ```
diff --git a/static/usage/v8/range/theming/css-shadow-parts/demo.html b/static/usage/v8/range/theming/css-shadow-parts/demo.html
index 530cec44444..2e465feb908 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/demo.html
+++ b/static/usage/v8/range/theming/css-shadow-parts/demo.html
@@ -6,53 +6,135 @@
     <title>Range</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/css/ionic.bundle.css"
+    />
     <style>
+      .container {
+        flex-direction: column;
+      }
+
+      /* Shared styles for all ranges */
       ion-range {
+        --knob-size: 34px;
+
+        width: 100%;
         max-width: 320px;
+
+        margin-bottom: 24px;
       }
 
-      ion-range::part(tick) {
-        background: #a2d2ff;
+      ion-range::part(knob) {
+        background: #fff;
+
+        box-sizing: border-box;
       }
 
-      ion-range::part(tick-active) {
-        background: #bde0fe;
+      /* Hide the Material Design indicator */
+      ion-range::part(knob)::before {
+        display: none;
       }
 
       ion-range::part(pin) {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        background: #ffafcc;
         color: #fff;
-
         border-radius: 50%;
-        transform: scale(1.01);
+      }
 
-        top: -20px;
+      ion-range::part(tick),
+      ion-range::part(tick-active) {
+        height: 8px;
+        top: 17px;
+      }
 
-        min-width: 28px;
-        height: 28px;
-        transition: transform 120ms ease, background 120ms ease;
+      /* Single Knob Range */
+      #range-single::part(bar),
+      #range-single::part(tick) {
+        background: #bed4ff;
       }
 
-      ion-range::part(pin)::before {
-        content: none;
+      #range-single::part(bar-active),
+      #range-single::part(tick-active) {
+        background: #40a2fd;
       }
 
-      ion-range::part(knob) {
-        background: #ffc8dd;
+      #range-single::part(knob) {
+        border: 4px solid #40a2fd;
+      }
+
+      #range-single::part(knob pressed) {
+        background: #bed4ff;
+      }
+
+      #range-single::part(pin),
+      #range-single::part(pin)::before {
+        background: #40a2fd;
+      }
+
+      /* Dual Knobs (A/B) Range */
+      #range-a-b::part(bar-active) {
+        background: #1ea9ca;
+      }
+
+      #range-a-b::part(knob-a) {
+        border: 4px solid #0f8fd6;
+      }
+
+      #range-a-b::part(knob-a pressed) {
+        background: #cfeefe;
+      }
+
+      #range-a-b::part(pin-a),
+      #range-a-b::part(pin-a)::before {
+        background: #0f8fd6;
+      }
+
+      #range-a-b::part(knob-b) {
+        border: 4px solid #2dc2bd;
       }
 
-      ion-range::part(bar) {
-        background: #a2d2ff;
+      #range-a-b::part(knob-b pressed) {
+        background: #d4f5f3;
       }
 
-      ion-range::part(bar-active) {
-        background: #bde0fe;
+      #range-a-b::part(pin-b),
+      #range-a-b::part(pin-b)::before {
+        background: #2dc2bd;
+      }
+
+      /* Dual Knobs (Lower/Upper) Range */
+      #range-lower-upper::part(bar-active) {
+        background: linear-gradient(to right, #0059ff 0%, #b77bff 100%);
+      }
+
+      #range-lower-upper::part(knob-lower) {
+        border: 4px solid #0059ff;
+      }
+
+      #range-lower-upper::part(knob-lower pressed) {
+        background: #bed4ff;
+      }
+
+      #range-lower-upper::part(pin-lower),
+      #range-lower-upper::part(pin-lower)::before {
+        background: #0059ff;
+      }
+
+      #range-lower-upper::part(knob-upper) {
+        border: 4px solid #b77bff;
+      }
+
+      #range-lower-upper::part(knob-upper pressed) {
+        background: #f1e5ff;
+      }
+
+      #range-lower-upper::part(pin-upper),
+      #range-lower-upper::part(pin-upper)::before {
+        background: #b77bff;
       }
     </style>
   </head>
@@ -61,7 +143,9 @@
     <ion-app>
       <ion-content>
         <div class="container">
+          <h2>Single Knob</h2>
           <ion-range
+            id="range-single"
             aria-label="Custom range"
             min="0"
             max="10"
@@ -70,8 +154,38 @@
             ticks="true"
             snaps="true"
           ></ion-range>
+
+          <h2>Dual Knobs (A/B)</h2>
+          <ion-range
+            id="range-a-b"
+            aria-label="Custom dual knob range with A/B styling"
+            min="0"
+            max="10"
+            dual-knobs="true"
+            pin="true"
+          ></ion-range>
+
+          <h2>Dual Knobs (Lower/Upper)</h2>
+          <ion-range
+            id="range-lower-upper"
+            aria-label="Custom dual knob range with lower/upper styling"
+            min="0"
+            max="10"
+            dual-knobs="true"
+            pin="true"
+          ></ion-range>
         </div>
       </ion-content>
     </ion-app>
+
+    <script>
+      const ranges = document.querySelectorAll('ion-range[dual-knobs]');
+      ranges.forEach((range) => {
+        range.value = {
+          lower: 3,
+          upper: 7,
+        };
+      });
+    </script>
   </body>
 </html>
diff --git a/static/usage/v8/range/theming/css-shadow-parts/index.md b/static/usage/v8/range/theming/css-shadow-parts/index.md
index 26f678c892a..0ca0902e211 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/index.md
+++ b/static/usage/v8/range/theming/css-shadow-parts/index.md
@@ -13,6 +13,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="8"
+  size="550px"
   code={{
     javascript,
     react: {
diff --git a/static/usage/v8/range/theming/css-shadow-parts/javascript.md b/static/usage/v8/range/theming/css-shadow-parts/javascript.md
index 87e968a80c8..0730872932c 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/javascript.md
+++ b/static/usage/v8/range/theming/css-shadow-parts/javascript.md
@@ -1,47 +1,158 @@
 ```html
-<ion-range aria-label="Custom range" min="0" max="10" value="5" pin="true" ticks="true" snaps="true"></ion-range>
+<h2>Single Knob</h2>
+<ion-range
+  id="range-single"
+  aria-label="Custom range"
+  min="0"
+  max="10"
+  value="5"
+  pin="true"
+  ticks="true"
+  snaps="true"
+></ion-range>
+
+<h2>Dual Knobs (A/B)</h2>
+<ion-range
+  id="range-a-b"
+  aria-label="Custom dual knob range with A/B styling"
+  min="0"
+  max="10"
+  dual-knobs="true"
+  pin="true"
+></ion-range>
+
+<h2>Dual Knobs (Lower/Upper)</h2>
+<ion-range
+  id="range-lower-upper"
+  aria-label="Custom dual knob range with lower/upper styling"
+  min="0"
+  max="10"
+  dual-knobs="true"
+  pin="true"
+></ion-range>
 
 <style>
-  ion-range::part(tick) {
-    background: #a2d2ff;
+  /* Shared styles for all ranges */
+  ion-range {
+    --knob-size: 34px;
   }
 
-  ion-range::part(tick-active) {
-    background: #bde0fe;
+  ion-range::part(knob) {
+    background: #fff;
+
+    box-sizing: border-box;
   }
 
-  ion-range::part(pin) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  /* Hide the Material Design indicator */
+  ion-range::part(knob)::before {
+    display: none;
+  }
 
-    background: #ffafcc;
+  ion-range::part(pin) {
     color: #fff;
-
     border-radius: 50%;
-    transform: scale(1.01);
+  }
 
-    top: -20px;
+  ion-range::part(tick),
+  ion-range::part(tick-active) {
+    height: 8px;
+    top: 17px;
+  }
 
-    min-width: 28px;
-    height: 28px;
-    transition: transform 120ms ease, background 120ms ease;
+  /* Single Knob Range */
+  #range-single::part(bar),
+  #range-single::part(tick) {
+    background: #bed4ff;
   }
 
-  ion-range::part(pin)::before {
-    content: none;
+  #range-single::part(bar-active),
+  #range-single::part(tick-active) {
+    background: #40a2fd;
   }
 
-  ion-range::part(knob) {
-    background: #ffc8dd;
+  #range-single::part(knob) {
+    border: 4px solid #40a2fd;
+  }
+
+  #range-single::part(knob pressed) {
+    background: #bed4ff;
+  }
+
+  #range-single::part(pin),
+  #range-single::part(pin)::before {
+    background: #40a2fd;
+  }
+
+  /* Dual Knobs (A/B) Range */
+  #range-a-b::part(bar-active) {
+    background: #1ea9ca;
+  }
+
+  #range-a-b::part(knob-a) {
+    border: 4px solid #0f8fd6;
   }
 
-  ion-range::part(bar) {
-    background: #a2d2ff;
+  #range-a-b::part(knob-a pressed) {
+    background: #cfeefe;
   }
 
-  ion-range::part(bar-active) {
-    background: #bde0fe;
+  #range-a-b::part(pin-a),
+  #range-a-b::part(pin-a)::before {
+    background: #0f8fd6;
+  }
+
+  #range-a-b::part(knob-b) {
+    border: 4px solid #2dc2bd;
+  }
+
+  #range-a-b::part(knob-b pressed) {
+    background: #d4f5f3;
+  }
+
+  #range-a-b::part(pin-b),
+  #range-a-b::part(pin-b)::before {
+    background: #2dc2bd;
+  }
+
+  /* Dual Knobs (Lower/Upper) Range */
+  #range-lower-upper::part(bar-active) {
+    background: linear-gradient(to right, #0059ff 0%, #b77bff 100%);
+  }
+
+  #range-lower-upper::part(knob-lower) {
+    border: 4px solid #0059ff;
+  }
+
+  #range-lower-upper::part(knob-lower pressed) {
+    background: #bed4ff;
+  }
+
+  #range-lower-upper::part(pin-lower),
+  #range-lower-upper::part(pin-lower)::before {
+    background: #0059ff;
+  }
+
+  #range-lower-upper::part(knob-upper) {
+    border: 4px solid #b77bff;
+  }
+
+  #range-lower-upper::part(knob-upper pressed) {
+    background: #f1e5ff;
+  }
+
+  #range-lower-upper::part(pin-upper),
+  #range-lower-upper::part(pin-upper)::before {
+    background: #b77bff;
   }
 </style>
+
+<script>
+  const ranges = document.querySelectorAll('ion-range[dual-knobs]');
+  ranges.forEach((range) => {
+    range.value = {
+      lower: 3,
+      upper: 7,
+    };
+  });
+</script>
 ```
diff --git a/static/usage/v8/range/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/range/theming/css-shadow-parts/react/main_css.md
index 0092daad827..2c6bf85e09e 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/react/main_css.md
+++ b/static/usage/v8/range/theming/css-shadow-parts/react/main_css.md
@@ -1,43 +1,114 @@
 ```css
-ion-range::part(tick) {
-  background: #a2d2ff;
+/* Shared styles for all ranges */
+ion-range {
+  --knob-size: 34px;
 }
 
-ion-range::part(tick-active) {
-  background: #bde0fe;
+ion-range::part(knob) {
+  background: #fff;
+
+  box-sizing: border-box;
 }
 
-ion-range::part(pin) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+/* Hide the Material Design indicator */
+ion-range::part(knob)::before {
+  display: none;
+}
 
-  background: #ffafcc;
+ion-range::part(pin) {
   color: #fff;
-
   border-radius: 50%;
-  transform: scale(1.01);
+}
+
+ion-range::part(tick),
+ion-range::part(tick-active) {
+  height: 8px;
+  top: 17px;
+}
 
-  top: -20px;
+/* Single Knob Range */
+#range-single::part(bar),
+#range-single::part(tick) {
+  background: #bed4ff;
+}
 
-  min-width: 28px;
-  height: 28px;
-  transition: transform 120ms ease, background 120ms ease;
+#range-single::part(bar-active),
+#range-single::part(tick-active) {
+  background: #40a2fd;
 }
 
-ion-range::part(pin)::before {
-  content: none;
+#range-single::part(knob) {
+  border: 4px solid #40a2fd;
 }
 
-ion-range::part(knob) {
-  background: #ffc8dd;
+#range-single::part(knob pressed) {
+  background: #bed4ff;
+}
+
+#range-single::part(pin),
+#range-single::part(pin)::before {
+  background: #40a2fd;
+}
+
+/* Dual Knobs (A/B) Range */
+#range-a-b::part(bar-active) {
+  background: #1ea9ca;
+}
+
+#range-a-b::part(knob-a) {
+  border: 4px solid #0f8fd6;
+}
+
+#range-a-b::part(knob-a pressed) {
+  background: #cfeefe;
+}
+
+#range-a-b::part(pin-a),
+#range-a-b::part(pin-a)::before {
+  background: #0f8fd6;
+}
+
+#range-a-b::part(knob-b) {
+  border: 4px solid #2dc2bd;
+}
+
+#range-a-b::part(knob-b pressed) {
+  background: #d4f5f3;
+}
+
+#range-a-b::part(pin-b),
+#range-a-b::part(pin-b)::before {
+  background: #2dc2bd;
+}
+
+/* Dual Knobs (Lower/Upper) Range */
+#range-lower-upper::part(bar-active) {
+  background: linear-gradient(to right, #0059ff 0%, #b77bff 100%);
+}
+
+#range-lower-upper::part(knob-lower) {
+  border: 4px solid #0059ff;
+}
+
+#range-lower-upper::part(knob-lower pressed) {
+  background: #bed4ff;
+}
+
+#range-lower-upper::part(pin-lower),
+#range-lower-upper::part(pin-lower)::before {
+  background: #0059ff;
+}
+
+#range-lower-upper::part(knob-upper) {
+  border: 4px solid #b77bff;
 }
 
-ion-range::part(bar) {
-  background: #a2d2ff;
+#range-lower-upper::part(knob-upper pressed) {
+  background: #f1e5ff;
 }
 
-ion-range::part(bar-active) {
-  background: #bde0fe;
+#range-lower-upper::part(pin-upper),
+#range-lower-upper::part(pin-upper)::before {
+  background: #b77bff;
 }
 ```
diff --git a/static/usage/v8/range/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/range/theming/css-shadow-parts/react/main_tsx.md
index 801f80be7a5..a48f62e3a09 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/react/main_tsx.md
+++ b/static/usage/v8/range/theming/css-shadow-parts/react/main_tsx.md
@@ -6,7 +6,41 @@ import './main.css';
 
 function Example() {
   return (
-    <IonRange aria-label="Custom range" min={0} max={10} value={5} pin={true} ticks={true} snaps={true}></IonRange>
+    <>
+      <h2>Single Knob</h2>
+      <IonRange
+        id="range-single"
+        aria-label="Custom range"
+        min={0}
+        max={10}
+        value={5}
+        pin={true}
+        ticks={true}
+        snaps={true}
+      ></IonRange>
+
+      <h2>Dual Knobs (A/B)</h2>
+      <IonRange
+        id="range-a-b"
+        aria-label="Custom dual knob range with A/B styling"
+        min={0}
+        max={10}
+        value={{ lower: 3, upper: 7 }}
+        dualKnobs={true}
+        pin={true}
+      ></IonRange>
+
+      <h2>Dual Knobs (Lower/Upper)</h2>
+      <IonRange
+        id="range-lower-upper"
+        aria-label="Custom dual knob range with lower/upper styling"
+        min={0}
+        max={10}
+        value={{ lower: 3, upper: 7 }}
+        dualKnobs={true}
+        pin={true}
+      ></IonRange>
+    </>
   );
 }
 
diff --git a/static/usage/v8/range/theming/css-shadow-parts/vue.md b/static/usage/v8/range/theming/css-shadow-parts/vue.md
index 6aa7c85c795..09528691310 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/vue.md
+++ b/static/usage/v8/range/theming/css-shadow-parts/vue.md
@@ -1,50 +1,123 @@
 ```html
 <style>
-  ion-range::part(tick) {
-    background: #a2d2ff;
+  /* Shared styles for all ranges */
+  ion-range {
+    --knob-size: 34px;
   }
 
-  ion-range::part(tick-active) {
-    background: #bde0fe;
+  ion-range::part(knob) {
+    background: #fff;
+
+    box-sizing: border-box;
   }
 
-  ion-range::part(pin) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  /* Hide the Material Design indicator */
+  ion-range::part(knob)::before {
+    display: none;
+  }
 
-    background: #ffafcc;
+  ion-range::part(pin) {
     color: #fff;
-
     border-radius: 50%;
-    transform: scale(1.01);
+  }
+
+  ion-range::part(tick),
+  ion-range::part(tick-active) {
+    height: 8px;
+    top: 17px;
+  }
 
-    top: -20px;
+  /* Single Knob Range */
+  #range-single::part(bar),
+  #range-single::part(tick) {
+    background: #bed4ff;
+  }
 
-    min-width: 28px;
-    height: 28px;
-    transition: transform 120ms ease, background 120ms ease;
+  #range-single::part(bar-active),
+  #range-single::part(tick-active) {
+    background: #40a2fd;
   }
 
-  ion-range::part(pin)::before {
-    content: none;
+  #range-single::part(knob) {
+    border: 4px solid #40a2fd;
   }
 
-  ion-range::part(knob) {
-    background: #ffc8dd;
+  #range-single::part(knob pressed) {
+    background: #bed4ff;
   }
 
-  ion-range::part(bar) {
-    background: #a2d2ff;
+  #range-single::part(pin),
+  #range-single::part(pin)::before {
+    background: #40a2fd;
   }
 
-  ion-range::part(bar-active) {
-    background: #bde0fe;
+  /* Dual Knobs (A/B) Range */
+  #range-a-b::part(bar-active) {
+    background: #1ea9ca;
+  }
+
+  #range-a-b::part(knob-a) {
+    border: 4px solid #0f8fd6;
+  }
+
+  #range-a-b::part(knob-a pressed) {
+    background: #cfeefe;
+  }
+
+  #range-a-b::part(pin-a),
+  #range-a-b::part(pin-a)::before {
+    background: #0f8fd6;
+  }
+
+  #range-a-b::part(knob-b) {
+    border: 4px solid #2dc2bd;
+  }
+
+  #range-a-b::part(knob-b pressed) {
+    background: #d4f5f3;
+  }
+
+  #range-a-b::part(pin-b),
+  #range-a-b::part(pin-b)::before {
+    background: #2dc2bd;
+  }
+
+  /* Dual Knobs (Lower/Upper) Range */
+  #range-lower-upper::part(bar-active) {
+    background: linear-gradient(to right, #0059ff 0%, #b77bff 100%);
+  }
+
+  #range-lower-upper::part(knob-lower) {
+    border: 4px solid #0059ff;
+  }
+
+  #range-lower-upper::part(knob-lower pressed) {
+    background: #bed4ff;
+  }
+
+  #range-lower-upper::part(pin-lower),
+  #range-lower-upper::part(pin-lower)::before {
+    background: #0059ff;
+  }
+
+  #range-lower-upper::part(knob-upper) {
+    border: 4px solid #b77bff;
+  }
+
+  #range-lower-upper::part(knob-upper pressed) {
+    background: #f1e5ff;
+  }
+
+  #range-lower-upper::part(pin-upper),
+  #range-lower-upper::part(pin-upper)::before {
+    background: #b77bff;
   }
 </style>
 
 <template>
+  <h2>Single Knob</h2>
   <ion-range
+    id="range-single"
     aria-label="Custom range"
     :min="0"
     :max="10"
@@ -53,6 +126,28 @@
     :ticks="true"
     :snaps="true"
   ></ion-range>
+
+  <h2>Dual Knobs (A/B)</h2>
+  <ion-range
+    id="range-a-b"
+    aria-label="Custom dual knob range with A/B styling"
+    :min="0"
+    :max="10"
+    :value="{lower: 3, upper: 7}"
+    :dual-knobs="true"
+    :pin="true"
+  ></ion-range>
+
+  <h2>Dual Knobs (Lower/Upper)</h2>
+  <ion-range
+    id="range-lower-upper"
+    aria-label="Custom dual knob range with lower/upper styling"
+    :min="0"
+    :max="10"
+    :value="{lower: 3, upper: 7}"
+    :dual-knobs="true"
+    :pin="true"
+  ></ion-range>
 </template>
 
 <script setup lang="ts">

From fa2101f751da6896c58b05f8dc322740412a6506 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 3 Mar 2026 16:51:58 -0500
Subject: [PATCH 3/5] docs(range): add section on dual knob parts

---
 docs/api/range.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/api/range.md b/docs/api/range.md
index fdb042bb3e9..020347753f9 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -124,6 +124,8 @@ import CSSProps from '@site/static/usage/v8/range/theming/css-properties/index.m
 
 Range includes [CSS Shadow Parts](#css-shadow-parts) to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.
 
+Range exposes additional Shadow Parts that allow styling each knob independently when `dualKnobs` is enabled. These parts are available in two forms: **static identity parts** (`A` and `B`) and **dynamic position parts** (`lower` and `upper`). The A and B parts always refer to the same physical knobs, even if the knobs cross over each other. In contrast, the lower and upper parts reflect the current value position, meaning they swap automatically if the knobs cross. This provides flexibility to style knobs either by consistent identity or by their relative value within the range.
+
 import CSSParts from '@site/static/usage/v8/range/theming/css-shadow-parts/index.md';
 
 <CSSParts />

From 699586c4db7a9b7edc31b742180b17affa9ada53 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 3 Mar 2026 16:57:02 -0500
Subject: [PATCH 4/5] copy editing

---
 docs/api/range.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/range.md b/docs/api/range.md
index 020347753f9..0a949acd1d0 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -124,7 +124,7 @@ import CSSProps from '@site/static/usage/v8/range/theming/css-properties/index.m
 
 Range includes [CSS Shadow Parts](#css-shadow-parts) to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.
 
-Range exposes additional Shadow Parts that allow styling each knob independently when `dualKnobs` is enabled. These parts are available in two forms: **static identity parts** (`A` and `B`) and **dynamic position parts** (`lower` and `upper`). The A and B parts always refer to the same physical knobs, even if the knobs cross over each other. In contrast, the lower and upper parts reflect the current value position, meaning they swap automatically if the knobs cross. This provides flexibility to style knobs either by consistent identity or by their relative value within the range.
+When `dualKnobs` is enabled, additional Shadow Parts are exposed to allow each knob to be styled independently. These are available in two forms: **static identity parts** (`A` and `B`) and **dynamic position parts** (`lower` and `upper`). The A and B parts always refer to the same physical knobs, even if the knobs cross. In contrast, the lower and upper parts reflect the current value position and automatically swap if the knobs cross. This allows styling by consistent identity or by relative value within the range.
 
 import CSSParts from '@site/static/usage/v8/range/theming/css-shadow-parts/index.md';
 

From d24b75325d2a67fa897e1ae6d540f0479c897223 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 4 Mar 2026 10:31:34 -0500
Subject: [PATCH 5/5] chore: revert dev build

---
 static/code/stackblitz/v8/angular/package.json         |  4 ++--
 static/code/stackblitz/v8/html/package.json            |  2 +-
 static/code/stackblitz/v8/react/package.json           |  4 ++--
 static/code/stackblitz/v8/vue/package.json             |  4 ++--
 .../usage/v8/range/theming/css-shadow-parts/demo.html  | 10 ++--------
 5 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
index 097203fb2a0..1b5bd920983 100644
--- a/static/code/stackblitz/v8/angular/package.json
+++ b/static/code/stackblitz/v8/angular/package.json
@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^20.0.0",
     "@angular/platform-browser-dynamic": "^20.0.0",
     "@angular/router": "^20.0.0",
-    "@ionic/angular": "8.7.17-dev.11771959013.18adabe2",
-    "@ionic/core": "8.7.17-dev.11771959013.18adabe2",
+    "@ionic/angular": "8.7.14",
+    "@ionic/core": "8.7.14",
     "ionicons": "8.0.13",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
index 4a1e3a88258..e0c5262152f 100644
--- a/static/code/stackblitz/v8/html/package.json
+++ b/static/code/stackblitz/v8/html/package.json
@@ -9,7 +9,7 @@
     "start": "vite preview"
   },
   "dependencies": {
-    "@ionic/core": "8.7.17-dev.11771959013.18adabe2",
+    "@ionic/core": "8.7.14",
     "ionicons": "8.0.13"
   },
   "devDependencies": {
diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json
index 2706b371fc4..bbbf6308c01 100644
--- a/static/code/stackblitz/v8/react/package.json
+++ b/static/code/stackblitz/v8/react/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "8.7.17-dev.11771959013.18adabe2",
-    "@ionic/react-router": "8.7.17-dev.11771959013.18adabe2",
+    "@ionic/react": "8.7.14",
+    "@ionic/react-router": "8.7.14",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
index df6508bb6b1..dfe2750877e 100644
--- a/static/code/stackblitz/v8/vue/package.json
+++ b/static/code/stackblitz/v8/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "8.7.17-dev.11771959013.18adabe2",
-    "@ionic/vue-router": "8.7.17-dev.11771959013.18adabe2",
+    "@ionic/vue": "8.7.14",
+    "@ionic/vue-router": "8.7.14",
     "vue": "^3.2.25",
     "vue-router": "5.0.1"
   },
diff --git a/static/usage/v8/range/theming/css-shadow-parts/demo.html b/static/usage/v8/range/theming/css-shadow-parts/demo.html
index 2e465feb908..bfa8f9e3ed6 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/demo.html
+++ b/static/usage/v8/range/theming/css-shadow-parts/demo.html
@@ -6,14 +6,8 @@
     <title>Range</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
     <style>
       .container {
         flex-direction: column;