diff --git a/docs/api/range.md b/docs/api/range.md
index fdb042bb3e9..0a949acd1d0 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.
 
+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';
 
 <CSSParts />
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 5ee2f25b113..bfa8f9e3ed6 100644
--- a/static/usage/v8/range/theming/css-shadow-parts/demo.html
+++ b/static/usage/v8/range/theming/css-shadow-parts/demo.html
@@ -9,50 +9,126 @@
     <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;
+      }
+
+      /* 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 +137,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 +148,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">