From ef2eb94801e4bf7f60873a46dac2b0c256ab57ee Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 27 Jan 2026 15:38:33 -0500
Subject: [PATCH 01/11] feat(range): add knob parts for A and B when dualKnobs
 is enabled

---
 core/api.txt                        |  5 ++++
 core/src/components/range/range.tsx | 41 +++++++++++++++++++++--------
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 745d82786af..2ddaf648e63 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1475,6 +1475,11 @@ ion-range,css-prop,--pin-color,md
 ion-range,part,bar
 ion-range,part,bar-active
 ion-range,part,knob
+ion-range,part,knob-a
+ion-range,part,knob-b
+ion-range,part,knob-handle
+ion-range,part,knob-handle-a
+ion-range,part,knob-handle-b
 ion-range,part,label
 ion-range,part,pin
 ion-range,part,tick
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 431dbe4b7fe..c9bf8d983b2 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -32,7 +32,12 @@ import type {
  * @part tick - An inactive tick mark.
  * @part tick-active - An active tick mark.
  * @part pin - The counter that appears above a knob.
- * @part knob - The handle that is used to drag the range.
+ * @part knob-handle - The container element that wraps the knob and handles drag interactions.
+ * @part knob-handle-a - The container element for the lower/left knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-b - The container element for the upper/right knob. Only available when `dualKnobs` is `true`.
+ * @part knob - The visual knob element that appears on the range track.
+ * @part knob-a - The visual knob element for the lower/left knob. Only available when `dualKnobs` is `true`.
+ * @part knob-b - The visual knob element for the upper/right knob. Only available when `dualKnobs` is `true`.
  * @part bar - The inactive part of the bar.
  * @part bar-active - The active part of the bar.
  * @part label - The label text describing the range.
@@ -616,9 +621,9 @@ export class Range implements ComponentInterface {
 
   private setFocus(knob: KnobName) {
     if (this.el.shadowRoot) {
-      const knobEl = this.el.shadowRoot.querySelector(knob === 'A' ? '.range-knob-a' : '.range-knob-b') as
-        | HTMLElement
-        | undefined;
+      const knobEl = this.el.shadowRoot.querySelector(
+        knob === 'A' ? '.range-knob-handle-a' : '.range-knob-handle-b'
+      ) as HTMLElement | undefined;
       if (knobEl) {
         knobEl.focus();
       }
@@ -647,8 +652,8 @@ export class Range implements ComponentInterface {
 
     // Manually manage ion-focused class for dual knobs
     if (this.dualKnobs && this.el.shadowRoot) {
-      const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
-      const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+      const knobA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
+      const knobB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
 
       // Remove ion-focused from both knobs first
       knobA?.classList.remove('ion-focused');
@@ -675,8 +680,8 @@ export class Range implements ComponentInterface {
 
         // Remove ion-focused from both knobs when focus leaves the range
         if (this.dualKnobs && this.el.shadowRoot) {
-          const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
-          const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+          const knobA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
+          const knobB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
           knobA?.classList.remove('ion-focused');
           knobB?.classList.remove('ion-focused');
         }
@@ -848,6 +853,7 @@ export class Range implements ComponentInterface {
 
         {renderKnob(rtl, {
           knob: 'A',
+          dualKnobs: this.dualKnobs,
           pressed: pressedKnob === 'A',
           value: this.valA,
           ratio: this.ratioA,
@@ -865,6 +871,7 @@ export class Range implements ComponentInterface {
         {this.dualKnobs &&
           renderKnob(rtl, {
             knob: 'B',
+            dualKnobs: this.dualKnobs,
             pressed: pressedKnob === 'B',
             value: this.valB,
             ratio: this.ratioB,
@@ -924,6 +931,7 @@ export class Range implements ComponentInterface {
           [mode]: true,
           'in-item': inItem,
           'range-disabled': disabled,
+          'range-dual-knobs': dualKnobs,
           'range-pressed': pressedKnob !== undefined,
           'range-has-pin': pin,
           [`range-label-placement-${labelPlacement}`]: true,
@@ -956,6 +964,7 @@ export class Range implements ComponentInterface {
 
 interface RangeKnob {
   knob: KnobName;
+  dualKnobs: boolean;
   value: number;
   ratio: number;
   min: number;
@@ -974,6 +983,7 @@ const renderKnob = (
   rtl: boolean,
   {
     knob,
+    dualKnobs,
     value,
     ratio,
     min,
@@ -1019,14 +1029,15 @@ const renderKnob = (
       onBlur={onKnobBlur}
       class={{
         'range-knob-handle': true,
-        'range-knob-a': knob === 'A',
-        'range-knob-b': knob === 'B',
+        'range-knob-handle-a': knob === 'A',
+        'range-knob-handle-b': knob === 'B',
         'range-knob-pressed': pressed,
         'range-knob-min': value === min,
         'range-knob-max': value === max,
         'ion-activatable': true,
         'ion-focusable': true,
       }}
+      part={dualKnobs ? (knob === 'A' ? 'knob-handle knob-handle-a' : 'knob-handle knob-handle-b') : 'knob-handle'}
       style={knobStyle()}
       role="slider"
       tabindex={disabled ? -1 : 0}
@@ -1042,7 +1053,15 @@ const renderKnob = (
           {pinFormatter(value)}
         </div>
       )}
-      <div class="range-knob" role="presentation" part="knob" />
+      <div
+        class={{
+          'range-knob': true,
+          'range-knob-a': knob === 'A',
+          'range-knob-b': knob === 'B',
+        }}
+        role="presentation"
+        part={dualKnobs ? (knob === 'A' ? 'knob knob-a' : 'knob knob-b') : 'knob'}
+      />
     </div>
   );
 };

From 915bf05f3a625105a20bab34369df873469c2268 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 27 Jan 2026 15:39:13 -0500
Subject: [PATCH 02/11] test(range): update references to old knob handle class

---
 .../components/range/test/basic/range.spec.ts | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/core/src/components/range/test/basic/range.spec.ts b/core/src/components/range/test/basic/range.spec.ts
index ab53ee05dc2..1501ed00c6e 100644
--- a/core/src/components/range/test/basic/range.spec.ts
+++ b/core/src/components/range/test/basic/range.spec.ts
@@ -18,8 +18,8 @@ describe('range: dual knobs focus management', () => {
     await page.waitForChanges();
 
     // Get the knob elements
-    const knobA = range!.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range!.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range!.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range!.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     expect(knobA).not.toBeNull();
     expect(knobB).not.toBeNull();
@@ -41,8 +41,8 @@ describe('range: dual knobs focus management', () => {
     const range = page.body.querySelector('ion-range');
     await page.waitForChanges();
 
-    const knobA = range!.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range!.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range!.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range!.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     // Focus knob A
     knobA.dispatchEvent(new Event('focus'));
@@ -73,8 +73,8 @@ describe('range: dual knobs focus management', () => {
     const range = page.body.querySelector('ion-range');
     await page.waitForChanges();
 
-    const knobA = range!.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range!.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range!.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range!.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     // Focus knob A
     knobA.dispatchEvent(new Event('focus'));
@@ -112,8 +112,8 @@ describe('range: dual knobs focus management', () => {
       focusEventFiredCount++;
     });
 
-    const knobA = range.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     // Focus knob A
     knobA.dispatchEvent(new Event('focus'));
@@ -140,7 +140,7 @@ describe('range: dual knobs focus management', () => {
       blurEventFired = true;
     });
 
-    const knobA = range.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
+    const knobA = range.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
 
     // Focus and then blur knob A
     knobA.dispatchEvent(new Event('focus'));
@@ -173,8 +173,8 @@ describe('range: dual knobs focus management', () => {
     const beforeButton = page.body.querySelector('#before') as HTMLElement;
     await page.waitForChanges();
 
-    const knobA = range.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     // Start with focus on element before the range
     beforeButton.focus();

From 67f605ba4f45be07cda1ad4d5ebda30f0e9e68f2 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 27 Jan 2026 15:40:59 -0500
Subject: [PATCH 03/11] test(range): add spec test for new css class and parts

---
 core/setupJest.js                            |   4 +-
 core/src/components/range/test/range.spec.ts | 184 +++++++++++++++++--
 2 files changed, 167 insertions(+), 21 deletions(-)

diff --git a/core/setupJest.js b/core/setupJest.js
index f2eb0e70a31..77ea127c680 100644
--- a/core/setupJest.js
+++ b/core/setupJest.js
@@ -8,7 +8,9 @@ expect.extend({
       throw new Error('expected toHaveShadowPart to be called on an element with a shadow root');
     }
 
-    const shadowPart = received.shadowRoot.querySelector(`[part="${part}"]`);
+    // Use attribute selector with ~= to match space-separated part values
+    // e.g., [part~="knob"] matches elements with part="knob" or part="knob knob-a"
+    const shadowPart = received.shadowRoot.querySelector(`[part~="${part}"]`);
     const pass = shadowPart !== null;
 
     const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;
diff --git a/core/src/components/range/test/range.spec.ts b/core/src/components/range/test/range.spec.ts
index 33c9b0021d1..5d284935cb4 100644
--- a/core/src/components/range/test/range.spec.ts
+++ b/core/src/components/range/test/range.spec.ts
@@ -5,7 +5,7 @@ import { Range } from '../range';
 
 let sharedRange: Range;
 
-describe('Range', () => {
+describe('range: values', () => {
   beforeEach(() => {
     sharedRange = new Range();
   });
@@ -87,7 +87,7 @@ describe('Range', () => {
   });
 });
 
-describe('range id', () => {
+describe('range: id', () => {
   it('should render custom id if passed', async () => {
     const page = await newSpecPage({
       components: [Range],
@@ -234,24 +234,6 @@ describe('range: item adjustments', () => {
     expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
     expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
   });
-
-  describe('shadow parts', () => {
-    it('should have shadow parts', async () => {
-      const page = await newSpecPage({
-        components: [Range],
-        html: `<ion-range pin="true" snaps="true" value="50" label="Label"></ion-range>`,
-      });
-      const range = page.body.querySelector('ion-range')!;
-
-      expect(range).toHaveShadowPart('label');
-      expect(range).toHaveShadowPart('pin');
-      expect(range).toHaveShadowPart('knob');
-      expect(range).toHaveShadowPart('bar');
-      expect(range).toHaveShadowPart('bar-active');
-      expect(range).toHaveShadowPart('tick');
-      expect(range).toHaveShadowPart('tick-active');
-    });
-  });
 });
 
 describe('range: value state classes', () => {
@@ -351,3 +333,165 @@ describe('range: value state classes', () => {
     expect(range.classList.contains('range-value-max')).toBe(false);
   });
 });
+
+describe('range: boolean property classes', () => {
+  it('should not have any boolean classes by default', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+    expect(range.classList.contains('range-disabled')).toBe(false);
+    expect(range.classList.contains('range-dual-knobs')).toBe(false);
+    expect(range.classList.contains('range-has-pin')).toBe(false);
+  });
+
+  it('should have range-disabled class when disabled is true', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range disabled="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+    expect(range.classList.contains('range-disabled')).toBe(true);
+  });
+
+  it('should have range-dual-knobs class when dual-knobs is true', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range dual-knobs="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+    expect(range.classList.contains('range-dual-knobs')).toBe(true);
+  });
+
+  it('should have range-has-pin class when pin is true', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+    expect(range.classList.contains('range-has-pin')).toBe(true);
+  });
+});
+
+describe('range: shadow parts', () => {
+  it('should have default shadow parts', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+
+    expect(range).toHaveShadowPart('bar');
+    expect(range).toHaveShadowPart('bar-active');
+
+    expect(range).toHaveShadowPart('label');
+
+    // knob and knob-handle parts always exist
+    expect(range).toHaveShadowPart('knob');
+    expect(range).toHaveShadowPart('knob-handle');
+
+    // knob a and knob b only exist when dualKnobs is true
+    expect(range).not.toHaveShadowPart('knob-a');
+    expect(range).not.toHaveShadowPart('knob-b');
+    expect(range).not.toHaveShadowPart('knob-handle-a');
+    expect(range).not.toHaveShadowPart('knob-handle-b');
+
+    // ticks only exist when ticks is true
+    expect(range).not.toHaveShadowPart('tick');
+    expect(range).not.toHaveShadowPart('tick-active');
+
+    // pin only exists when pin is true
+    expect(range).not.toHaveShadowPart('pin');
+  });
+
+  it('should have tick shadow parts', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range snaps="true" ticks="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+
+    expect(range).toHaveShadowPart('bar');
+    expect(range).toHaveShadowPart('bar-active');
+
+    expect(range).toHaveShadowPart('label');
+
+    // knob and knob-handle parts always exist
+    expect(range).toHaveShadowPart('knob');
+    expect(range).toHaveShadowPart('knob-handle');
+
+    // knob a and knob b only exist when dualKnobs is true
+    expect(range).not.toHaveShadowPart('knob-a');
+    expect(range).not.toHaveShadowPart('knob-b');
+    expect(range).not.toHaveShadowPart('knob-handle-a');
+    expect(range).not.toHaveShadowPart('knob-handle-b');
+
+    // ticks only exist when snaps and ticks are true
+    expect(range).toHaveShadowPart('tick');
+    expect(range).toHaveShadowPart('tick-active');
+
+    // pin only exists when pin is true
+    expect(range).not.toHaveShadowPart('pin');
+  });
+
+  it('should have pin shadow part', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+
+    expect(range).toHaveShadowPart('bar');
+    expect(range).toHaveShadowPart('bar-active');
+
+    expect(range).toHaveShadowPart('label');
+
+    // knob and knob-handle parts always exist
+    expect(range).toHaveShadowPart('knob');
+    expect(range).toHaveShadowPart('knob-handle');
+
+    // knob a and knob b only exist when dualKnobs is true
+    expect(range).not.toHaveShadowPart('knob-a');
+    expect(range).not.toHaveShadowPart('knob-b');
+    expect(range).not.toHaveShadowPart('knob-handle-a');
+    expect(range).not.toHaveShadowPart('knob-handle-b');
+
+    // ticks only exist when snaps and ticks are true
+    expect(range).not.toHaveShadowPart('tick');
+    expect(range).not.toHaveShadowPart('tick-active');
+
+    // pin only exists when pin is true
+    expect(range).toHaveShadowPart('pin');
+  });
+
+  it('should have dual knob shadow parts', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range dual-knobs="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+
+    expect(range).toHaveShadowPart('bar');
+    expect(range).toHaveShadowPart('bar-active');
+
+    expect(range).toHaveShadowPart('label');
+
+    // knob and knob-handle parts always exist
+    expect(range).toHaveShadowPart('knob');
+    expect(range).toHaveShadowPart('knob-handle');
+
+    // knob a and knob b only exist when dualKnobs is true
+    expect(range).toHaveShadowPart('knob-a');
+    expect(range).toHaveShadowPart('knob-b');
+    expect(range).toHaveShadowPart('knob-handle-a');
+    expect(range).toHaveShadowPart('knob-handle-b');
+
+    // ticks only exist when snaps and ticks are true
+    expect(range).not.toHaveShadowPart('tick');
+    expect(range).not.toHaveShadowPart('tick-active');
+
+    // pin only exists when pin is true
+    expect(range).not.toHaveShadowPart('pin');
+  });
+});

From f57efc4548fb2a1d595f4ac3f67df16cc7d0a9bd Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 27 Jan 2026 17:22:09 -0500
Subject: [PATCH 04/11] feat(range): add pin a and b parts

---
 core/api.txt                                 |  2 ++
 core/src/components/range/range.tsx          |  4 +++-
 core/src/components/range/test/range.spec.ts | 20 ++++++++++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 2ddaf648e63..37b4ef7e02b 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1482,6 +1482,8 @@ ion-range,part,knob-handle-a
 ion-range,part,knob-handle-b
 ion-range,part,label
 ion-range,part,pin
+ion-range,part,pin-a
+ion-range,part,pin-b
 ion-range,part,tick
 ion-range,part,tick-active
 
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index c9bf8d983b2..3c430064821 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -32,6 +32,8 @@ import type {
  * @part tick - An inactive tick mark.
  * @part tick-active - An active tick mark.
  * @part pin - The counter that appears above a knob.
+ * @part pin-a - The counter that appears above the lower/left knob. Only available when `dualKnobs` is `true`.
+ * @part pin-b - The counter that appears above the upper/right knob. Only available when `dualKnobs` is `true`.
  * @part knob-handle - The container element that wraps the knob and handles drag interactions.
  * @part knob-handle-a - The container element for the lower/left knob. Only available when `dualKnobs` is `true`.
  * @part knob-handle-b - The container element for the upper/right knob. Only available when `dualKnobs` is `true`.
@@ -1049,7 +1051,7 @@ const renderKnob = (
       aria-valuenow={value}
     >
       {pin && (
-        <div class="range-pin" role="presentation" part="pin">
+        <div class="range-pin" role="presentation" part={dualKnobs ? (knob === 'A' ? 'pin pin-a' : 'pin pin-b') : 'pin'}>
           {pinFormatter(value)}
         </div>
       )}
diff --git a/core/src/components/range/test/range.spec.ts b/core/src/components/range/test/range.spec.ts
index 5d284935cb4..1e3c7e7b504 100644
--- a/core/src/components/range/test/range.spec.ts
+++ b/core/src/components/range/test/range.spec.ts
@@ -403,6 +403,10 @@ describe('range: shadow parts', () => {
 
     // pin only exists when pin is true
     expect(range).not.toHaveShadowPart('pin');
+
+    // pin a and pin b only exist when pin is true and dualKnobs is true
+    expect(range).not.toHaveShadowPart('pin-a');
+    expect(range).not.toHaveShadowPart('pin-b');
   });
 
   it('should have tick shadow parts', async () => {
@@ -433,6 +437,10 @@ describe('range: shadow parts', () => {
 
     // pin only exists when pin is true
     expect(range).not.toHaveShadowPart('pin');
+
+    // pin a and pin b only exist when pin is true and dualKnobs is true
+    expect(range).not.toHaveShadowPart('pin-a');
+    expect(range).not.toHaveShadowPart('pin-b');
   });
 
   it('should have pin shadow part', async () => {
@@ -463,12 +471,16 @@ describe('range: shadow parts', () => {
 
     // pin only exists when pin is true
     expect(range).toHaveShadowPart('pin');
+
+    // pin a and pin b only exist when pin is true and dualKnobs is true
+    expect(range).not.toHaveShadowPart('pin-a');
+    expect(range).not.toHaveShadowPart('pin-b');
   });
 
   it('should have dual knob shadow parts', async () => {
     const page = await newSpecPage({
       components: [Range],
-      html: `<ion-range dual-knobs="true" value="50" label="Label"></ion-range>`,
+      html: `<ion-range dual-knobs="true" pin="true" value="50" label="Label"></ion-range>`,
     });
     const range = page.body.querySelector('ion-range')!;
 
@@ -492,6 +504,10 @@ describe('range: shadow parts', () => {
     expect(range).not.toHaveShadowPart('tick-active');
 
     // pin only exists when pin is true
-    expect(range).not.toHaveShadowPart('pin');
+    expect(range).toHaveShadowPart('pin');
+
+    // pin a and pin b only exist when pin is true and dualKnobs is true
+    expect(range).toHaveShadowPart('pin-a');
+    expect(range).toHaveShadowPart('pin-b');
   });
 });

From 83803c6a850e208c21801304f4a725b3a18e90e6 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 28 Jan 2026 17:35:57 -0500
Subject: [PATCH 05/11] feat(range): add pressed and focused parts for
 knob-handle, knob and pin

---
 core/api.txt                        |  2 +
 core/src/components/range/range.tsx | 57 ++++++++++++++++++++++++-----
 2 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 37b4ef7e02b..4d1c6903ba1 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1474,6 +1474,7 @@ ion-range,css-prop,--pin-color,ios
 ion-range,css-prop,--pin-color,md
 ion-range,part,bar
 ion-range,part,bar-active
+ion-range,part,focused
 ion-range,part,knob
 ion-range,part,knob-a
 ion-range,part,knob-b
@@ -1484,6 +1485,7 @@ ion-range,part,label
 ion-range,part,pin
 ion-range,part,pin-a
 ion-range,part,pin-b
+ion-range,part,pressed
 ion-range,part,tick
 ion-range,part,tick-active
 
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 3c430064821..14657f97093 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -29,20 +29,22 @@ import type {
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
  *
+ * @part label - The label text describing the range.
  * @part tick - An inactive tick mark.
  * @part tick-active - An active tick mark.
- * @part pin - The counter that appears above a knob.
- * @part pin-a - The counter that appears above the lower/left knob. Only available when `dualKnobs` is `true`.
- * @part pin-b - The counter that appears above the upper/right knob. Only available when `dualKnobs` is `true`.
+ * @part bar - The inactive part of the bar.
+ * @part bar-active - The active part of the bar.
  * @part knob-handle - The container element that wraps the knob and handles drag interactions.
  * @part knob-handle-a - The container element for the lower/left knob. Only available when `dualKnobs` is `true`.
  * @part knob-handle-b - The container element for the upper/right knob. Only available when `dualKnobs` is `true`.
+ * @part pin - The counter that appears above a knob.
+ * @part pin-a - The counter that appears above the lower/left knob. Only available when `dualKnobs` is `true`.
+ * @part pin-b - The counter that appears above the upper/right knob. Only available when `dualKnobs` is `true`.
  * @part knob - The visual knob element that appears on the range track.
  * @part knob-a - The visual knob element for the lower/left knob. Only available when `dualKnobs` is `true`.
  * @part knob-b - The visual knob element for the upper/right knob. Only available when `dualKnobs` is `true`.
- * @part bar - The inactive part of the bar.
- * @part bar-active - The active part of the bar.
- * @part label - The label text describing the range.
+ * @part pressed - Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time.
+ * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time.
  */
 @Component({
   tag: 'ion-range',
@@ -70,6 +72,7 @@ export class Range implements ComponentInterface {
   @State() private ratioA = 0;
   @State() private ratioB = 0;
   @State() private pressedKnob: KnobName;
+  @State() private focusedKnob: KnobName | undefined;
 
   /**
    * The color to use from your application's color palette.
@@ -635,6 +638,7 @@ export class Range implements ComponentInterface {
   private onBlur = () => {
     if (this.hasFocus) {
       this.hasFocus = false;
+      this.focusedKnob = undefined;
       this.ionBlur.emit();
     }
   };
@@ -647,6 +651,7 @@ export class Range implements ComponentInterface {
   };
 
   private onKnobFocus = (knob: KnobName) => {
+    this.focusedKnob = knob;
     if (!this.hasFocus) {
       this.hasFocus = true;
       this.ionFocus.emit();
@@ -677,6 +682,7 @@ export class Range implements ComponentInterface {
       if (!isStillFocusedOnKnob) {
         if (this.hasFocus) {
           this.hasFocus = false;
+          this.focusedKnob = undefined;
           this.ionBlur.emit();
         }
 
@@ -715,6 +721,7 @@ export class Range implements ComponentInterface {
       max,
       step,
       handleKeyboard,
+      focusedKnob,
       pressedKnob,
       disabled,
       pin,
@@ -857,6 +864,7 @@ export class Range implements ComponentInterface {
           knob: 'A',
           dualKnobs: this.dualKnobs,
           pressed: pressedKnob === 'A',
+          focused: focusedKnob === 'A',
           value: this.valA,
           ratio: this.ratioA,
           pin,
@@ -875,6 +883,7 @@ export class Range implements ComponentInterface {
             knob: 'B',
             dualKnobs: this.dualKnobs,
             pressed: pressedKnob === 'B',
+            focused: focusedKnob === 'B',
             value: this.valB,
             ratio: this.ratioB,
             pin,
@@ -973,6 +982,7 @@ interface RangeKnob {
   max: number;
   disabled: boolean;
   pressed: boolean;
+  focused: boolean;
   pin: boolean;
   pinFormatter: PinFormatter;
   inheritedAttributes: Attributes;
@@ -992,6 +1002,7 @@ const renderKnob = (
     max,
     disabled,
     pressed,
+    focused,
     pin,
     handleKeyboard,
     pinFormatter,
@@ -1039,7 +1050,15 @@ const renderKnob = (
         'ion-activatable': true,
         'ion-focusable': true,
       }}
-      part={dualKnobs ? (knob === 'A' ? 'knob-handle knob-handle-a' : 'knob-handle knob-handle-b') : 'knob-handle'}
+      part={[
+        'knob-handle',
+        dualKnobs && knob === 'A' && 'knob-handle-a',
+        dualKnobs && knob === 'B' && 'knob-handle-b',
+        pressed && 'pressed',
+        focused && 'focused',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={knobStyle()}
       role="slider"
       tabindex={disabled ? -1 : 0}
@@ -1051,7 +1070,19 @@ const renderKnob = (
       aria-valuenow={value}
     >
       {pin && (
-        <div class="range-pin" role="presentation" part={dualKnobs ? (knob === 'A' ? 'pin pin-a' : 'pin pin-b') : 'pin'}>
+        <div
+          class="range-pin"
+          role="presentation"
+          part={[
+            'pin',
+            dualKnobs && knob === 'A' && 'pin-a',
+            dualKnobs && knob === 'B' && 'pin-b',
+            pressed && 'pressed',
+            focused && 'focused',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
           {pinFormatter(value)}
         </div>
       )}
@@ -1062,7 +1093,15 @@ const renderKnob = (
           'range-knob-b': knob === 'B',
         }}
         role="presentation"
-        part={dualKnobs ? (knob === 'A' ? 'knob knob-a' : 'knob knob-b') : 'knob'}
+        part={[
+          'knob',
+          dualKnobs && knob === 'A' && 'knob-a',
+          dualKnobs && knob === 'B' && 'knob-b',
+          pressed && 'pressed',
+          focused && 'focused',
+        ]
+          .filter(Boolean)
+          .join(' ')}
       />
     </div>
   );

From d5b257004eb8080a6b1dda9cbf710c2dadc3ccda Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Thu, 29 Jan 2026 14:46:12 -0500
Subject: [PATCH 06/11] test(range): add pressed and focused parts to spec test

---
 core/src/components/range/test/range.spec.ts | 183 +++++++++++++++++++
 1 file changed, 183 insertions(+)

diff --git a/core/src/components/range/test/range.spec.ts b/core/src/components/range/test/range.spec.ts
index 1e3c7e7b504..e04cbeb5f50 100644
--- a/core/src/components/range/test/range.spec.ts
+++ b/core/src/components/range/test/range.spec.ts
@@ -3,6 +3,9 @@ import { newSpecPage } from '@stencil/core/testing';
 import { Item } from '../../item/item';
 import { Range } from '../range';
 
+const waitForEvent = (el: HTMLElement, eventName: string) =>
+  new Promise<void>((resolve) => el.addEventListener(eventName, () => resolve(), { once: true }));
+
 let sharedRange: Range;
 
 describe('range: values', () => {
@@ -510,4 +513,184 @@ describe('range: shadow parts', () => {
     expect(range).toHaveShadowPart('pin-a');
     expect(range).toHaveShadowPart('pin-b');
   });
+
+  it('should have pressed shadow part when pressed', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+    const shadowRoot = range.shadowRoot!;
+
+    // pressed part should not exist on any element by default
+    expect(shadowRoot.querySelector('[part~="knob-handle"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin"][part~="pressed"]')).toBeNull();
+
+    // Simulate a pressed knob by setting state on component instance
+    const component = page.rootInstance as any;
+    component.pressedKnob = 'A';
+    await page.waitForChanges();
+
+    // pressed part should exist on knob-handle, knob, and pin when pressed
+    expect(shadowRoot.querySelector('[part~="knob-handle"][part~="pressed"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob"][part~="pressed"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin"][part~="pressed"]')).not.toBeNull();
+
+    // Clear the pressed state
+    component.pressedKnob = undefined;
+    await page.waitForChanges();
+
+    // pressed part should not exist after clearing pressed state
+    expect(shadowRoot.querySelector('[part~="knob-handle"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin"][part~="pressed"]')).toBeNull();
+  });
+
+  it('should have focused shadow part when focused', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+    const shadowRoot = range.shadowRoot!;
+
+    // focused part should not exist on any element by default
+    expect(shadowRoot.querySelector('[part~="knob-handle"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin"][part~="focused"]')).toBeNull();
+
+    // Focus the knob handle
+    const knobHandle = shadowRoot.querySelector('.range-knob-handle') as HTMLElement;
+    knobHandle.focus();
+    await page.waitForChanges();
+
+    // focused part should exist on knob-handle, knob, and pin when focused
+    expect(shadowRoot.querySelector('[part~="knob-handle"][part~="focused"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob"][part~="focused"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin"][part~="focused"]')).not.toBeNull();
+
+    // Blur the knob handle and wait for the component to finish handling blur
+    knobHandle.blur();
+    await waitForEvent(range, 'ionBlur');
+    await page.waitForChanges();
+
+    // focused part should not exist after blur
+    expect(shadowRoot.querySelector('[part~="knob-handle"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin"][part~="focused"]')).toBeNull();
+  });
+
+  it('should have pressed shadow part on only one knob when dual-knobs is', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range dual-knobs="true" pin="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+    const shadowRoot = range.shadowRoot!;
+    const component = page.rootInstance as any;
+
+    // pressed part should not exist on any element by default
+    expect(shadowRoot.querySelector('[part~="knob-handle-a"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-a"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-a"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-handle-b"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-b"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-b"][part~="pressed"]')).toBeNull();
+
+    // Press knob A
+    component.pressedKnob = 'A';
+    await page.waitForChanges();
+
+    // pressed part should exist on knob A's handle, knob, and pin
+    expect(shadowRoot.querySelector('[part~="knob-handle-a"][part~="pressed"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-a"][part~="pressed"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-a"][part~="pressed"]')).not.toBeNull();
+    // knob B should not have pressed
+    expect(shadowRoot.querySelector('[part~="knob-handle-b"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-b"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-b"][part~="pressed"]')).toBeNull();
+
+    // Press knob B
+    component.pressedKnob = 'B';
+    await page.waitForChanges();
+
+    // pressed part should now exist on knob B's handle, knob, and pin
+    expect(shadowRoot.querySelector('[part~="knob-handle-b"][part~="pressed"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-b"][part~="pressed"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-b"][part~="pressed"]')).not.toBeNull();
+    // knob A should no longer have pressed
+    expect(shadowRoot.querySelector('[part~="knob-handle-a"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-a"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-a"][part~="pressed"]')).toBeNull();
+
+    // Clear the pressed state
+    component.pressedKnob = undefined;
+    await page.waitForChanges();
+
+    // pressed part should not exist after clearing pressed state
+    expect(shadowRoot.querySelector('[part~="knob-handle-a"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-a"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-a"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-handle-b"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-b"][part~="pressed"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-b"][part~="pressed"]')).toBeNull();
+  });
+
+  it('should have focused shadow part on only one knob when dual-knobs is', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `<ion-range dual-knobs="true" pin="true" value="50" label="Label"></ion-range>`,
+    });
+    const range = page.body.querySelector('ion-range')!;
+    const shadowRoot = range.shadowRoot!;
+
+    // focused part should not exist on any element by default
+    expect(shadowRoot.querySelector('[part~="knob-handle-a"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-a"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-a"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-handle-b"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-b"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-b"][part~="focused"]')).toBeNull();
+
+    // Focus knob A
+    const knobHandleA = shadowRoot.querySelector('.range-knob-handle-a') as HTMLElement;
+    knobHandleA.focus();
+    await page.waitForChanges();
+
+    // focused part should exist on knob A's handle, knob, and pin
+    expect(shadowRoot.querySelector('[part~="knob-handle-a"][part~="focused"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-a"][part~="focused"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-a"][part~="focused"]')).not.toBeNull();
+    // knob B should not have focused
+    expect(shadowRoot.querySelector('[part~="knob-handle-b"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-b"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-b"][part~="focused"]')).toBeNull();
+
+    // Focus knob B
+    const knobHandleB = shadowRoot.querySelector('.range-knob-handle-b') as HTMLElement;
+    knobHandleB.focus();
+    await page.waitForChanges();
+
+    // focused part should now exist on knob B's handle, knob, and pin
+    expect(shadowRoot.querySelector('[part~="knob-handle-b"][part~="focused"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-b"][part~="focused"]')).not.toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-b"][part~="focused"]')).not.toBeNull();
+    // knob A should no longer have focused
+    expect(shadowRoot.querySelector('[part~="knob-handle-a"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-a"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-a"][part~="focused"]')).toBeNull();
+
+    knobHandleB.blur();
+    await waitForEvent(range, 'ionBlur');
+    await page.waitForChanges();
+
+    // focused part should not exist after blur
+    expect(shadowRoot.querySelector('[part~="knob-handle-a"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-a"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-a"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-handle-b"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="knob-b"][part~="focused"]')).toBeNull();
+    expect(shadowRoot.querySelector('[part~="pin-b"][part~="focused"]')).toBeNull();
+  });
 });

From 6741093fe8d21b8224a8927dda4926d1fe502230 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Thu, 29 Jan 2026 14:47:16 -0500
Subject: [PATCH 07/11] test(range): update custom test to check styles instead
 of screenshots

---
 .../components/range/test/custom/index.html   | 193 +++++++++++++++
 .../components/range/test/custom/range.e2e.ts | 226 +++++++++++++++++-
 ...nge-custom-ios-ltr-Mobile-Chrome-linux.png | Bin 1953 -> 0 bytes
 ...ge-custom-ios-ltr-Mobile-Firefox-linux.png | Bin 2738 -> 0 bytes
 ...nge-custom-ios-ltr-Mobile-Safari-linux.png | Bin 1948 -> 0 bytes
 ...ange-custom-md-ltr-Mobile-Chrome-linux.png | Bin 751 -> 0 bytes
 ...nge-custom-md-ltr-Mobile-Firefox-linux.png | Bin 1092 -> 0 bytes
 ...ange-custom-md-ltr-Mobile-Safari-linux.png | Bin 782 -> 0 bytes
 8 files changed, 414 insertions(+), 5 deletions(-)
 delete mode 100644 core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png
 delete mode 100644 core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Firefox-linux.png
 delete mode 100644 core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Safari-linux.png
 delete mode 100644 core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Chrome-linux.png
 delete mode 100644 core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Firefox-linux.png
 delete mode 100644 core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Safari-linux.png

diff --git a/core/src/components/range/test/custom/index.html b/core/src/components/range/test/custom/index.html
index 7af1453aaa9..bd8be71bef0 100644
--- a/core/src/components/range/test/custom/index.html
+++ b/core/src/components/range/test/custom/index.html
@@ -14,6 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <style>
+    /* 1st Custom Range */
     .range-part::part(bar) {
       background: red;
     }
@@ -51,6 +52,148 @@
     .md.range-part::part(pin)::before {
       background: orange;
     }
+
+    /* 2nd Custom Range: Single Knob */
+    .custom-knobs {
+      --color-blue-light: #3b82f6;
+      --color-blue-primary: var(--ion-color-primary, #0054e9);
+      --color-blue-dark: #1e3a8a;
+    }
+
+    .custom-knobs::part(knob-handle) {
+      --custom-knob-width: 50px;
+      --custom-knob-height: 25px;
+
+      width: var(--custom-knob-width);
+      height: var(--custom-knob-height);
+
+      /* Center vertically */
+      top: calc((var(--height) - var(--custom-knob-height)) / 2);
+
+      /* Center horizontally */
+      margin-inline-start: calc(0px - var(--custom-knob-width) / 2);
+
+      transform-origin: center center;
+    }
+
+    .custom-knobs::part(knob) {
+      background: rgba(255, 255, 255, 0.5);
+      backdrop-filter: blur(10px);
+
+      inset: 0;
+
+      width: 100%;
+      height: 100%;
+
+      /* MD scales smaller by default, make iOS scale to match */
+      transform: scale(0.67);
+
+      border-radius: 4px;
+      border: 1px solid rgba(3, 60, 89, 0.5);
+    }
+
+    /* Pressed knob */
+    .custom-knobs::part(knob pressed) {
+      background: var(--color-blue-primary);
+    }
+
+    /* Hover/focus indicator */
+    .custom-knobs::part(knob)::before {
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+
+    /* Pressed/focused knob hover/focus indicator */
+    .custom-knobs::part(knob pressed)::before,
+    .custom-knobs::part(knob focused)::before {
+      transform: scale(1);
+    }
+
+    /* TODO hover states */
+
+    /* iOS offset is larger than MD due to not having a bottom arrow */
+    .ios.custom-knobs {
+      --pin-offset: 8px;
+    }
+
+    .md.custom-knobs {
+      --pin-offset: 4px;
+    }
+
+    .ios.custom-knobs {
+      padding-top: 40px;
+    }
+
+    .ios.custom-knobs::part(pin) {
+      border-radius: 50%;
+      background-color: var(--color-blue-primary);
+      color: #fff;
+    }
+
+    /* Move the pin up so it sits above the taller custom knob when pressed/focused */
+    .custom-knobs::part(pin pressed),
+    .custom-knobs::part(pin focused) {
+      transform: translate3d(0, calc(-100% - (var(--custom-knob-height) / 2) + var(--pin-offset)), 0) scale(1);
+    }
+
+    .custom-knobs [slot='start'] {
+      margin-inline-end: 36px;
+    }
+
+    .custom-knobs [slot='end'] {
+      margin-inline-start: 36px;
+    }
+
+    /* 3rd Custom Range: Dual Knobs */
+    .custom-knobs.range-dual-knobs::part(knob-a) {
+      border-radius: 50% 0 0 50%;
+    }
+
+    .custom-knobs.range-dual-knobs::part(knob-b) {
+      border-radius: 0 50% 50% 0;
+    }
+
+    /* Pressed knob a */
+    .custom-knobs::part(knob-a pressed) {
+      background: var(--color-blue-light);
+    }
+
+    /* Pressed knob b */
+    .custom-knobs::part(knob-b pressed) {
+      background: var(--color-blue-dark);
+    }
+
+    .custom-knobs.range-dual-knobs::part(pin-a),
+    .custom-knobs.range-dual-knobs::part(pin-a):before {
+      background: var(--color-blue-light);
+    }
+
+    .custom-knobs.range-dual-knobs::part(pin-b),
+    .custom-knobs.range-dual-knobs::part(pin-b):before {
+      background: var(--color-blue-dark);
+    }
+
+    /* Displayed knob values */
+    .custom-knobs.range-dual-knobs .knob-value {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 36px;
+      height: 36px;
+
+      border: 1px solid #000;
+      border-radius: 4px;
+    }
+
+    .custom-knobs.range-dual-knobs [slot='start'] {
+      border-color: var(--color-blue-light);
+    }
+
+    .custom-knobs.range-dual-knobs [slot='end'] {
+      border-color: var(--color-blue-dark);
+    }
   </style>
   <body>
     <ion-app>
@@ -61,6 +204,7 @@
       </ion-header>
 
       <ion-content class="ion-padding">
+        <!-- 1st Custom Range -->
         <ion-range
           class="range-part"
           min="-200"
@@ -71,6 +215,38 @@
           dual-knobs="true"
           aria-label="Custom Range"
         ></ion-range>
+
+        <!-- 2nd Custom Range: Single Knob -->
+        <ion-range
+          id="single-knob-range"
+          class="custom-knobs"
+          step="5"
+          snaps="true"
+          pin="true"
+          value="50"
+          aria-label="Custom Range"
+        >
+          <span slot="start">
+            <ion-icon name="volume-off" size="large" color="primary"></ion-icon>
+          </span>
+          <span slot="end">
+            <ion-icon name="volume-high" size="large" color="primary"></ion-icon>
+          </span>
+        </ion-range>
+
+        <!-- 3rd Custom Range: Dual Knobs -->
+        <ion-range
+          id="dual-knobs-range"
+          class="custom-knobs"
+          step="5"
+          snaps="true"
+          pin="true"
+          dual-knobs="true"
+          aria-label="Custom Dual Knobs Range"
+        >
+          <div slot="start" class="knob-value"></div>
+          <div slot="end" class="knob-value"></div>
+        </ion-range>
       </ion-content>
     </ion-app>
 
@@ -80,6 +256,23 @@
         lower: '-100',
         upper: '100',
       };
+
+      const dualKnobs = document.getElementById('dual-knobs-range');
+      dualKnobs.value = {
+        lower: '25',
+        upper: '75',
+      };
+
+      function updateDisplayedKnobValues() {
+        document.querySelector('#dual-knobs-range [slot="start"]').textContent = dualKnobs.value.lower;
+        document.querySelector('#dual-knobs-range [slot="end"]').textContent = dualKnobs.value.upper;
+      }
+
+      updateDisplayedKnobValues();
+
+      dualKnobs.addEventListener('ionChange', () => {
+        updateDisplayedKnobValues();
+      });
     </script>
   </body>
 </html>
diff --git a/core/src/components/range/test/custom/range.e2e.ts b/core/src/components/range/test/custom/range.e2e.ts
index a474187abe8..d4c250d8ee6 100644
--- a/core/src/components/range/test/custom/range.e2e.ts
+++ b/core/src/components/range/test/custom/range.e2e.ts
@@ -1,13 +1,229 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('range: customization'), () => {
-    test('should be customizable', async ({ page }) => {
-      await page.goto(`/src/components/range/test/custom`, config);
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('range: custom'), () => {
+    test.describe(title('CSS shadow parts'), () => {
+      test('should be able to customize bar parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(bar) {
+              background-color: red;
+            }
+            ion-range::part(bar-active) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-range label="Label" value="50"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        const barBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const bar = shadowRoot?.querySelector('.range-bar');
+          return bar ? window.getComputedStyle(bar).backgroundColor : '';
+        });
+        expect(barBackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const activeBarBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const activeBar = shadowRoot?.querySelector('.range-bar-active');
+          return activeBar ? window.getComputedStyle(activeBar).backgroundColor : '';
+        });
+        expect(activeBarBackgroundColor).toBe('rgb(0, 128, 0)');
+      });
+
+      test('should be able to customize tick parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(tick) {
+              background-color: red;
+            }
+            ion-range::part(tick-active) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-range label="Label" value="50" snaps="true" ticks="true"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        const tickBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const tick = shadowRoot?.querySelector('.range-tick:not(.range-tick-active)');
+          return tick ? window.getComputedStyle(tick).backgroundColor : '';
+        });
+        expect(tickBackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const activeTickBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const activeTick = shadowRoot?.querySelector('.range-tick-active');
+          return activeTick ? window.getComputedStyle(activeTick).backgroundColor : '';
+        });
+        expect(activeTickBackgroundColor).toBe('rgb(0, 128, 0)');
+      });
+
+      test('should be able to customize pin parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(pin) {
+              background-color: red;
+            }
+            ion-range::part(pin)::before {
+              background-color: green;
+            }
+          </style>
+
+          <ion-range label="Label" value="50" pin="true"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        const pinBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const pin = shadowRoot?.querySelector('.range-pin');
+          return pin ? window.getComputedStyle(pin).backgroundColor : '';
+        });
+        expect(pinBackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const pinBeforeBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const pin = shadowRoot?.querySelector('.range-pin');
+          if (!pin) return '';
+          return window.getComputedStyle(pin, '::before').backgroundColor;
+        });
+        expect(pinBeforeBackgroundColor).toBe('rgb(0, 128, 0)');
+      });
+
+      test('should be able to customize knob parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(knob-handle) {
+              background-color: red;
+            }
+            ion-range::part(knob) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-range label="Label" value="50"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        const knobHandleBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knobHandle = shadowRoot?.querySelector('.range-knob-handle');
+          return knobHandle ? window.getComputedStyle(knobHandle).backgroundColor : '';
+        });
+        expect(knobHandleBackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const knobBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knob = shadowRoot?.querySelector('.range-knob');
+          return knob ? window.getComputedStyle(knob).backgroundColor : '';
+        });
+        expect(knobBackgroundColor).toBe('rgb(0, 128, 0)');
+      });
+    });
+
+    test('should be able to customize dual knob parts', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-range::part(knob-handle-a) {
+            background-color: red;
+          }
+          ion-range::part(knob-handle-b) {
+            background-color: green;
+          }
+          ion-range::part(knob-a) {
+            background-color: blue;
+          }
+          ion-range::part(knob-b) {
+            background-color: yellow;
+          }
+          ion-range::part(pin-a) {
+            background-color: orange;
+          }
+          ion-range::part(pin-b) {
+            background-color: purple;
+          }
+        </style>
+
+        <ion-range label="Label" dual-knobs="true" pin="true"></ion-range>
+      `,
+        config
+      );
 
       const range = page.locator('ion-range');
-      await expect(range).toHaveScreenshot(screenshot(`range-custom`));
+      await range.evaluate((el) => {
+        (el as any).value = {
+          lower: 25,
+          upper: 75,
+        };
+      });
+      await page.waitForChanges();
+
+      const knobHandleABackgroundColor = await range.evaluate((el) => {
+        const shadowRoot = el.shadowRoot;
+        const knobHandleA = shadowRoot?.querySelector('.range-knob-handle-a');
+        return knobHandleA ? window.getComputedStyle(knobHandleA).backgroundColor : '';
+      });
+      expect(knobHandleABackgroundColor).toBe('rgb(255, 0, 0)');
+
+      const knobHandleBBackgroundColor = await range.evaluate((el) => {
+        const shadowRoot = el.shadowRoot;
+        const knobHandleB = shadowRoot?.querySelector('.range-knob-handle-b');
+        return knobHandleB ? window.getComputedStyle(knobHandleB).backgroundColor : '';
+      });
+      expect(knobHandleBBackgroundColor).toBe('rgb(0, 128, 0)');
+
+      const knobABackgroundColor = await range.evaluate((el) => {
+        const shadowRoot = el.shadowRoot;
+        const knobA = shadowRoot?.querySelector('.range-knob-a');
+        return knobA ? window.getComputedStyle(knobA).backgroundColor : '';
+      });
+      expect(knobABackgroundColor).toBe('rgb(0, 0, 255)');
+
+      const knobBBackgroundColor = await range.evaluate((el) => {
+        const shadowRoot = el.shadowRoot;
+        const knobB = shadowRoot?.querySelector('.range-knob-b');
+        return knobB ? window.getComputedStyle(knobB).backgroundColor : '';
+      });
+      expect(knobBBackgroundColor).toBe('rgb(255, 255, 0)');
+
+      const pinABackgroundColor = await range.evaluate((el) => {
+        const shadowRoot = el.shadowRoot;
+        const pinA = shadowRoot?.querySelector('.range-knob-handle-a .range-pin');
+        return pinA ? window.getComputedStyle(pinA).backgroundColor : '';
+      });
+      expect(pinABackgroundColor).toBe('rgb(255, 165, 0)');
+
+      const pinBBackgroundColor = await range.evaluate((el) => {
+        const shadowRoot = el.shadowRoot;
+        const pinB = shadowRoot?.querySelector('.range-knob-handle-b .range-pin');
+        return pinB ? window.getComputedStyle(pinB).backgroundColor : '';
+      });
+      expect(pinBBackgroundColor).toBe('rgb(128, 0, 128)');
     });
   });
 });
diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index c04a8de175ca2ecc38153a77d0f6bc4d74aae08f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1953
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
N?#`aLN+;sg{{icuscHZK

diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index c453df1337386e5d6a50951c7eb55fc96520ae04..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2738
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
G{O7+a8x9Zv

diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index a34eb31ad6159e1cd2a6b7af3da0d76b0d838858..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1948
zcmb`I`#;kS8^^y!hMU@QXoQ>^7G(-`%Xt|ghOi+Tmb++obBb_F&PIlqCg-!vX?QG$
zWRcT~rfAVExe2MsA+h$je|Y|b=XJeapX>9(=ZEW;&-+Ssx`dXJP>=usK+4tz<qQBq
zgne%+2HMyBH8^p9iQ?_hC_wP<lyq0;000<ci?VRNUHIjZH&Ny?Y_K?luvO_DSlbY6
zF^fb7JIEL)SQ72+Q^cig1Gpmn;BQti72dF?8Gvyr@yrt0uy&BF#n_zDn6Ly{r?<&8
zH85rZB8)>ak6eq0`u&UHqnXbmMSQ_Y!`9Oy1qDSuf|sL(q&!<~aR6`we^?R*09WZ0
zNx&R{$OCbJivIr1=KcTxihBV7A^=4Q5ChbN0SJH+1yq3lQ!uW39Ng6R_?y8=a`Wc-
z!%ekuuu5NpACu^SLQ;mOv${EX(#ez3yx|`JjXCaTU;DRonJB*osxq)#`{2d5M^%vc
zGrASI*QKDh*tJ^8mJPfbZ8I_$FH#9tvob?F9(Ws;INt((y~mcm5tQk0Eph;Q%MPwq
zraKpII6^;yRlAPOyP0~u!upe*atcQDA9PYge0t%Z-r>8qHfUx)Lg}A+86LmJ47d5h
z(Vj|+g(372i?+GsK6CQA-g*6KoS13?WG$z2YO&XI{`2KFNJq<%`_g9kNQ>)L)iLqb
z1wB{_#t@DkaMo2Eq#UYR?tu|L?*LNB;hqk(;xv)lUWaf!N}@`zYDD}5xpr^kQxYKb
zl{8)fvo#|A4+~WG#}64T$IwcHyrSftci>47s|Ipf-4Cl<I32XNs+1Qte4}-ZYqrq+
zm(n2AvWDOg_RLqsdVwl0FVQH-mEYR_3+pnyPLtOEwHc#n)Emm04Z1KYjCYN{ODWat
zu1=&5vtnaiua3O&&l9ZQuhVqxlBVy)_5B2pmVHlOe0v3c`It683VqNa|HNR9NsoHE
z_9aoWL9+^kMD&^VvmxW!kr#dH-4KWmXR;M+H!C@$MIPH9(HTxl0w=lf6CIR}g>GC~
zy4(#rT7ck5izS&*ppJ|0x2)Nnip$l#r;Ze*NBESP#Qau#^x{N+-!sxS@Z}PHuBwrt
z`CU`)H|CI$iT$_}FS&j9Y*_W1n>mU~C8fWf^+d#|9P;)sMmqCrpX7hl$D?w)a#xpE
z)=l#+R#}UpIV6(Gbiu0E6NkB9a(8It?%^zr<Fd)`uZ2(s3z~54YmU1_>}36|O_q)S
zI5`Yb{vUKX%hzWjRhilIfMEF3#?t&`>;qK1mgA>0U%79#u^xAJG)TO8R%A;GjDje>
z0yPNH==n*p%R5f7Yh2ixVJE<?f4)s$Yxs`AIr-J9Tpp7&@G4i1<>Yp~qTu|+)bauk
zHuID?UV%!kN>L^hhE<ZbsN<OvAM7jd5~7xv%|`IFGS#cUV(qX@lTS8nDwB3E@Jnwy
z-^G&G<9*7D<gZUH^?OLm(am4ys2Uox8DPRc@)%<qg=)R$kOJ*>pF!AjNrNlp%Ha<$
z<v`Wph>yuG{rC9ymc`xC#KGo}LB+u#$7)YgzV73L(cz&TXBnsE(y>O4>&+*~DM<WG
z{#21hq@Wd0hu2RtPO8Hb``F_$e9o!k;<lt~jo;awZPN40L-pJA_nt7MZ8!!aNu~x_
zZ`3;sP;;F**qtqA)4P{niB4lllPVs^I3B4Wd~U|MYfJnEa<anh;^N|$3#9R5%7(Ml
zn&?wIZ+>i`8wc>sfegK&G$Ze4EiPSmrNH=v^t<lzzt1Mzn7*ewad6ImaW-&ktQu4Y
z-LFs*S`;b^*PoIrj$BEUpbZ;cC^{C@tYase<#g~+kPM{!{OEm2#4yFQE2c*q7p|T?
z&Y|S523E*1_E}*qPgRtkHPKjn-yU3)VrtUk&U(C#qeXW(biJ=21b?r}qaXNRE1E;s
z+%DVejFh#rP+w1Wn3gD#9h7elb<HqWb?%qo;$Wq|m;7~%ed@Q}CZ)OU&wB=%4{Z}X
z{py3<SdY;r+(jn0e7q)@`;%YCBT<D|Vn;$mv9+u}9~#wE5fUG{fBMdQA~5)HTj7!J
zxfmK_sx`CW^-M#!OLs7rVxw_5^)_Ltk*P&kajrBcLy+h7L(g$?5t;L6Gt1@Hr@f+e
zTm-&`rj(2dZ{v9;a*gBJS!EL?$Xf)re?#dUPSw)wqD@xfs76~iVGwoHC|Po1@70*r
z=u8znHB6D%w;Q*Ns~4#()SHmZiG!))i5o%*;(qp<^rCw`=~iFw@XjtKPUC~QMyJ!>
z^6R30^jsujHJ=hh@d+syO6mNH-lp4hNj`|(=^nmusP*G~C^7PY>}b7)s4x=2V!ZIc
zId&N=H)P*SleLPl6q^g%Yq?O)3DBI{GbcCc>FS5Nc6`QZZGg&XrP~Zgifo}?OEy(%
zpMApWR*jk`BB+hjABLFJ?2kEw3^pj?AWQ6kuzJ5A_T2fSGWJiLC(Tw@b_3d8alML9
zgGzyY1l3r$DRuYS?t)J6AHH_CjaJwxEO}m*1y7(5{$*;GKuGU!g4ninJZ=Bo0=5?}
Kq3D*r@&5(Oa*Z_r

diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 84d461cc8c6368f5d96f48085b35c0154fcbadae..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 751
zcmeAS@N?(olHy`uVBq!ia0y~yV9W%v-8k5QB;U7GNg%~o9OUlAu<o49O9lp}m7Xq+
zAr*7p-ahL!B~j$SN8>D$T^F`2;?KI6v?y$9cgG8(D3{%N3!+!N6x!9iVyXB=rHpV-
zmu}8Chm{P1SdO}V%AFY2?Z%!y=efrI`)+ODIrxkI81FI8U%P6R7K2CTiZ6@|FMO6T
z3JGU69C49SFr3KdF^IU*nzaqgtGgm<|EXS!(>?O*Pmzm@jFq+ASMTG=Z+^Wz)ZQGs
z;j-(MRjXEc$v;}~^Jl55nEd|UZ^xhhk6UlvcjU+0Zo{ISk^}0^cQ;;sy5sJ}{Lmwh
zCZ9VkBe?NeRM%4Xe6|XW7maiEyq5gVdHS+ui+xGlGu^k}PjCE{Q^%m*bnnK?O)k66
z*X@aWQC0TV_50?4uDN>IOCqz~T#oGBaldfI&dRfA_>8x*U)*ObY-o0|@LT-+`)7|{
zeD-Dj_0Y%P&quBP{C>vGI<?0$zkNPakgbun|Ll>FlI@q@-rU)7>;7E7-}`s<r|p^i
zZh4lnQVrkfgBt~<1Fya*@!WU!V)}jgeLY*RC53PPdMw4~?%qwuA<hA+-h6Sj`tEtM
zyC3de`Xqh%X`z>P(tFFa_~zgK`7d^_q2$+>!ps(eUyk`rSG`o7@aS4=$HUxzTMj!L
z)_wl-fRDv?6EGmu_l9qiTR1ni<E#Jd{tNRY`+ueOU)bb-^Q96f32e7!AU!$MF)GS@
WZG9KLX96$<GkCiCxvX<aXaWEtZc_RH

diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 558bc0a7e76962630271bb02a70c0d4559ce4e77..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1092
zcmeAS@N?(olHy`uVBq!ia0y~yV9W%v-8k5QB;U7GNd^WMZci7-kczmsw;l6+0!7$A
zM0e_0nFaA0>ZoqhiP(_w$oYqm*c#7}L$g}-A3A&NN;ufG_Q)hI&5bWh0y_=YuabIO
z@~*r5y>({YX5r&|kH4Su=YICpI~AWi?N~Sj6a<12{5;y{bT0$4H|Q!X(Pd&}VqxOu
zczNLPMJXV&Ws9tWLxV#CqoQnuMU=8bL&Jn^%s`DCItoje`Q5XDOo2;f4GfG-jjSyt
z4<2Up0+~*?_yiOj6gD(W;IolgE2!Y$;Bgyh76*%%z@^6a#il?eN2awy14H8hCMT;8
z1zX&J1}NsTgWMD0;K44}cMZr?Sn?KV)^K%<p2eKA)3Y<T?3%XCE<fkKQT;O)DINaH
zhqfjjjF$CXFsEUzUb^+$6vfyBf1bZ^|Ml(3+dPZ^)vm(Vy0_~uO>Tb7npdvU_>T2W
z$@gVD)wy2AtQ0GK-5=-A`@;UXiR0dq?_S-(Q-xmmAMpF0uD`^3+x?o4nzi-c^j=??
zY_7ko^>zB@EK$K1-au*9|G(oD?{2I=C*8jNW#2{F@Q?$3;!o#R{<z~6C21b|{qm_R
zkJzpEFMpP>Xs=!N_Ic-B?nf8AyV83%zEA&+jpcoRd#AHc&OQ>D@78zmp<8aPU0v?>
z%ZHcOmq(TTso%!+vQIw1sp>!TvRn<HYL};Tl$Y$Tzrg+SuXN<+hmUW|uDw^CF23Hr
zX6m+mJ!#^8TF?CXFJ0QZI&y0l#~0Ov<-aH0uYAy_KEE#7B5M0@_i2kw{p)8>c~i1K
z`hoARhWc}}+qb`9`p~DNmax40;yIfLkMk;7@f-d&|L?!=^LLxO@P+Pjz2E0`-e&&o
zoX7H}#Q($O?A8*;-_K4Tx%jI6?uNWWl^bgAop%#ADKCj+w2r;@eZl3{lG<W(Az<>2
zcJN3K)>Hwe{#r)G*!y>Sfoc5&Fa_TX;o=lf2#9y^xNcsq3{0V$fGOW>suM6(UlA9$
x^!4mr4`9m9VN{&!yL19D1%CxfQ^&~0_?mv#z?%<Oi2+Lo22WQ%mvv4FO#l%Xv1tGR

diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 3961620b727e7c78dc39ed886ad5741f0df72859..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 782
zcmeAS@N?(olHy`uVBq!ia0y~yU`zwD-8h(lWWoHEhk+DZlDE4H!+#K5uy^@n1_q|X
zo-U3d6?5L+^3Dz^mpJh7`;m%Fy-7~0UV8&BHfdgR-CP*FTW3es%N>`N&OglZ#{7eJ
z#z9TJsb%W#T&DB3MR?_&T*|GTsg~7Yspm2wrf;7@v7hDn&41?~wQeu3J2PkIBAwF=
z752=f{0x8Qd$3JVkaTEDVc?v^s4`F-gNW}8U!&vSto`%r$ImyDd!KG?+`GF>URKtw
zy5jzH_E+<|XGQkpil#<hvvr<3?{0L(ugf_*_x)7k@$Ku6wGm}@)eR1`?%p^#tlltk
z_TTR>x3))LS5gXludjQ*=F0zx8BE=Q3$LDx*k>7@_om|3?%&^kJ<5_lzED%gtyN4t
zdF6Jq`>QSV%^%%tKDw{hIXI%n>u89N>yf83ZdIB6b?i@j)SXwNmb6URT&nQP&G^sH
z>+V?nzn%AXcX4KlmC~;EN9_|W_6yvddiJ`>lNC0Sf`MmpKWj<VU6JgRZh!QA>I)r{
zM=yTKr>|SLC)u#AZohF^HBeV!otm1}#kn2#&0;T4Sj_)huP?0rRLA#<ceh`;AJz>O
z6I<-n4fM^cv++B_Yfrw|e%$T6?ECW;Cap(TTzTX#`S@_Po$NXbeYQu7*YkbLm6>%Y
zDI}}VNa<UB{iYi~*?8(}D?U63fch~^J^B1|`TkgoP@cSE;WoA7-|Nd4{a3!oBDUD6
zdw%MkkDumW{a^R<^U=fV`tkquf82O+!rcAaynjpH?OZYQ=#6Q>#Ig2Y5>tvN(P`xa
Z*LG38E~mfu&jS-UgQu&X%Q~loCIE8pPVE2y


From a30551079d1ae276580178223bd15e2b14f6d9b8 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 30 Jan 2026 14:10:34 -0500
Subject: [PATCH 08/11] test(range): target knob by handle a or b

---
 core/src/components/range/test/custom/range.e2e.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/range/test/custom/range.e2e.ts b/core/src/components/range/test/custom/range.e2e.ts
index d4c250d8ee6..b5a52073cc9 100644
--- a/core/src/components/range/test/custom/range.e2e.ts
+++ b/core/src/components/range/test/custom/range.e2e.ts
@@ -199,14 +199,14 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
 
       const knobABackgroundColor = await range.evaluate((el) => {
         const shadowRoot = el.shadowRoot;
-        const knobA = shadowRoot?.querySelector('.range-knob-a');
+        const knobA = shadowRoot?.querySelector('.range-knob-handle-a .range-knob');
         return knobA ? window.getComputedStyle(knobA).backgroundColor : '';
       });
       expect(knobABackgroundColor).toBe('rgb(0, 0, 255)');
 
       const knobBBackgroundColor = await range.evaluate((el) => {
         const shadowRoot = el.shadowRoot;
-        const knobB = shadowRoot?.querySelector('.range-knob-b');
+        const knobB = shadowRoot?.querySelector('.range-knob-handle-b .range-knob');
         return knobB ? window.getComputedStyle(knobB).backgroundColor : '';
       });
       expect(knobBBackgroundColor).toBe('rgb(255, 255, 0)');

From e617be3c532f607ddc2ca491046129d0b62109c6 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 30 Jan 2026 15:30:35 -0500
Subject: [PATCH 09/11] feat(range): add upper and lower knob parts and fix
 related focus bugs

---
 core/api.txt                                 |   6 +
 core/src/components/range/range-interface.ts |   2 +
 core/src/components/range/range.tsx          | 111 ++++++++++++-------
 3 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 39aa43a1546..686dd093016 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1482,10 +1482,16 @@ ion-range,part,knob-b
 ion-range,part,knob-handle
 ion-range,part,knob-handle-a
 ion-range,part,knob-handle-b
+ion-range,part,knob-handle-lower
+ion-range,part,knob-handle-upper
+ion-range,part,knob-lower
+ion-range,part,knob-upper
 ion-range,part,label
 ion-range,part,pin
 ion-range,part,pin-a
 ion-range,part,pin-b
+ion-range,part,pin-lower
+ion-range,part,pin-upper
 ion-range,part,pressed
 ion-range,part,tick
 ion-range,part,tick-active
diff --git a/core/src/components/range/range-interface.ts b/core/src/components/range/range-interface.ts
index 1908bbab172..9cc696d90e3 100644
--- a/core/src/components/range/range-interface.ts
+++ b/core/src/components/range/range-interface.ts
@@ -1,5 +1,7 @@
 export type KnobName = 'A' | 'B' | undefined;
 
+export type KnobPosition = 'lower' | 'upper' | undefined;
+
 export type RangeValue = number | { lower: number; upper: number };
 
 export type PinFormatter = (value: number) => number | string;
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 14657f97093..b664e032708 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -13,6 +13,7 @@ import { roundToMaxDecimalPlaces } from '../../utils/floating-point';
 
 import type {
   KnobName,
+  KnobPosition,
   RangeChangeEventDetail,
   RangeKnobMoveEndEventDetail,
   RangeKnobMoveStartEventDetail,
@@ -35,14 +36,20 @@ import type {
  * @part bar - The inactive part of the bar.
  * @part bar-active - The active part of the bar.
  * @part knob-handle - The container element that wraps the knob and handles drag interactions.
- * @part knob-handle-a - The container element for the lower/left knob. Only available when `dualKnobs` is `true`.
- * @part knob-handle-b - The container element for the upper/right knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-a - The container element for the first knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-b - The container element for the second knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-lower - The container element for the lower knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-upper - The container element for the upper knob. Only available when `dualKnobs` is `true`.
  * @part pin - The counter that appears above a knob.
- * @part pin-a - The counter that appears above the lower/left knob. Only available when `dualKnobs` is `true`.
- * @part pin-b - The counter that appears above the upper/right knob. Only available when `dualKnobs` is `true`.
+ * @part pin-a - The counter that appears above the first knob. Only available when `dualKnobs` is `true`.
+ * @part pin-b - The counter that appears above the second knob. Only available when `dualKnobs` is `true`.
+ * @part pin-lower - The counter that appears above the lower knob. Only available when `dualKnobs` is `true`.
+ * @part pin-upper - The counter that appears above the upper knob. Only available when `dualKnobs` is `true`.
  * @part knob - The visual knob element that appears on the range track.
- * @part knob-a - The visual knob element for the lower/left knob. Only available when `dualKnobs` is `true`.
- * @part knob-b - The visual knob element for the upper/right knob. Only available when `dualKnobs` is `true`.
+ * @part knob-a - The visual knob element for the first knob. Only available when `dualKnobs` is `true`.
+ * @part knob-b - The visual knob element for the second knob. Only available when `dualKnobs` is `true`.
+ * @part knob-lower - The visual knob element for the lower knob. Only available when `dualKnobs` is `true`.
+ * @part knob-upper - The visual knob element for the upper knob. Only available when `dualKnobs` is `true`.
  * @part pressed - Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time.
  * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time.
  */
@@ -72,7 +79,7 @@ export class Range implements ComponentInterface {
   @State() private ratioA = 0;
   @State() private ratioB = 0;
   @State() private pressedKnob: KnobName;
-  @State() private focusedKnob: KnobName | undefined;
+  @State() private focusedKnob: KnobName;
 
   /**
    * The color to use from your application's color palette.
@@ -525,6 +532,13 @@ export class Range implements ComponentInterface {
 
     // update the active knob's position
     this.update(currentX);
+
+    /**
+     * Blur the knob so focus styles are cleared.
+     */
+    const knobEl = this.getKnobElement(this.pressedKnob);
+    knobEl?.blur();
+
     /**
      * Reset the pressed knob to undefined since the user
      * may start dragging a different knob in the next gesture event.
@@ -573,6 +587,15 @@ export class Range implements ComponentInterface {
     this.setFocus(this.pressedKnob);
   }
 
+  /**
+   * Returns the DOM element for the given knob.
+   */
+  private getKnobElement(knob: KnobName): HTMLElement | null {
+    return this.el.shadowRoot?.querySelector(
+      knob === 'A' ? '.range-knob-handle-a' : '.range-knob-handle-b'
+    ) as HTMLElement | null;
+  }
+
   private get valA() {
     return ratioToValue(this.ratioA, this.min, this.max, this.step);
   }
@@ -602,9 +625,26 @@ export class Range implements ComponentInterface {
   private updateRatio() {
     const value = this.getValue() as any;
     const { min, max } = this;
+
+    /**
+     * For dual knobs, value gives lower/upper but not which is A vs B.
+     * Assign (lowerRatio, upperRatio) to (ratioA, ratioB) in the way that
+     * minimizes change from the current ratios so the knobs don't swap.
+     */
     if (this.dualKnobs) {
-      this.ratioA = valueToRatio(value.lower, min, max);
-      this.ratioB = valueToRatio(value.upper, min, max);
+      const lowerRatio = valueToRatio(value.lower, min, max);
+      const upperRatio = valueToRatio(value.upper, min, max);
+
+      if (
+        Math.abs(this.ratioA - lowerRatio) + Math.abs(this.ratioB - upperRatio) <=
+        Math.abs(this.ratioA - upperRatio) + Math.abs(this.ratioB - lowerRatio)
+      ) {
+        this.ratioA = lowerRatio;
+        this.ratioB = upperRatio;
+      } else {
+        this.ratioA = upperRatio;
+        this.ratioB = lowerRatio;
+      }
     } else {
       this.ratioA = valueToRatio(value, min, max);
     }
@@ -626,12 +666,8 @@ export class Range implements ComponentInterface {
 
   private setFocus(knob: KnobName) {
     if (this.el.shadowRoot) {
-      const knobEl = this.el.shadowRoot.querySelector(
-        knob === 'A' ? '.range-knob-handle-a' : '.range-knob-handle-b'
-      ) as HTMLElement | undefined;
-      if (knobEl) {
-        knobEl.focus();
-      }
+      const knobEl = this.getKnobElement(knob);
+      knobEl?.focus();
     }
   }
 
@@ -656,20 +692,6 @@ export class Range implements ComponentInterface {
       this.hasFocus = true;
       this.ionFocus.emit();
     }
-
-    // Manually manage ion-focused class for dual knobs
-    if (this.dualKnobs && this.el.shadowRoot) {
-      const knobA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
-      const knobB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
-
-      // Remove ion-focused from both knobs first
-      knobA?.classList.remove('ion-focused');
-      knobB?.classList.remove('ion-focused');
-
-      // Add ion-focused only to the focused knob
-      const focusedKnobEl = knob === 'A' ? knobA : knobB;
-      focusedKnobEl?.classList.add('ion-focused');
-    }
   };
 
   private onKnobBlur = () => {
@@ -685,14 +707,6 @@ export class Range implements ComponentInterface {
           this.focusedKnob = undefined;
           this.ionBlur.emit();
         }
-
-        // Remove ion-focused from both knobs when focus leaves the range
-        if (this.dualKnobs && this.el.shadowRoot) {
-          const knobA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
-          const knobB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
-          knobA?.classList.remove('ion-focused');
-          knobB?.classList.remove('ion-focused');
-        }
       }
     }, 0);
   };
@@ -862,6 +876,7 @@ export class Range implements ComponentInterface {
 
         {renderKnob(rtl, {
           knob: 'A',
+          position: this.dualKnobs ? (this.ratioA <= this.ratioB ? 'lower' : 'upper') : 'lower',
           dualKnobs: this.dualKnobs,
           pressed: pressedKnob === 'A',
           focused: focusedKnob === 'A',
@@ -881,6 +896,7 @@ export class Range implements ComponentInterface {
         {this.dualKnobs &&
           renderKnob(rtl, {
             knob: 'B',
+            position: this.ratioB <= this.ratioA ? 'lower' : 'upper',
             dualKnobs: this.dualKnobs,
             pressed: pressedKnob === 'B',
             focused: focusedKnob === 'B',
@@ -975,6 +991,7 @@ export class Range implements ComponentInterface {
 
 interface RangeKnob {
   knob: KnobName;
+  position: KnobPosition;
   dualKnobs: boolean;
   value: number;
   ratio: number;
@@ -995,6 +1012,7 @@ const renderKnob = (
   rtl: boolean,
   {
     knob,
+    position,
     dualKnobs,
     value,
     ratio,
@@ -1026,6 +1044,12 @@ const renderKnob = (
 
   return (
     <div
+      onMouseDown={(ev) => {
+        /**
+         * Prevent the knob from being focused when the user clicks on it.
+         */
+        ev.preventDefault();
+      }}
       onKeyDown={(ev: KeyboardEvent) => {
         const key = ev.key;
         if (key === 'ArrowLeft' || key === 'ArrowDown') {
@@ -1049,11 +1073,14 @@ const renderKnob = (
         'range-knob-max': value === max,
         'ion-activatable': true,
         'ion-focusable': true,
+        'ion-focused': focused,
       }}
       part={[
         'knob-handle',
         dualKnobs && knob === 'A' && 'knob-handle-a',
         dualKnobs && knob === 'B' && 'knob-handle-b',
+        dualKnobs && position === 'lower' && 'knob-handle-lower',
+        dualKnobs && position === 'upper' && 'knob-handle-upper',
         pressed && 'pressed',
         focused && 'focused',
       ]
@@ -1077,6 +1104,8 @@ const renderKnob = (
             'pin',
             dualKnobs && knob === 'A' && 'pin-a',
             dualKnobs && knob === 'B' && 'pin-b',
+            dualKnobs && position === 'lower' && 'pin-lower',
+            dualKnobs && position === 'upper' && 'pin-upper',
             pressed && 'pressed',
             focused && 'focused',
           ]
@@ -1087,16 +1116,14 @@ const renderKnob = (
         </div>
       )}
       <div
-        class={{
-          'range-knob': true,
-          'range-knob-a': knob === 'A',
-          'range-knob-b': knob === 'B',
-        }}
+        class="range-knob"
         role="presentation"
         part={[
           'knob',
           dualKnobs && knob === 'A' && 'knob-a',
           dualKnobs && knob === 'B' && 'knob-b',
+          dualKnobs && position === 'lower' && 'knob-lower',
+          dualKnobs && position === 'upper' && 'knob-upper',
           pressed && 'pressed',
           focused && 'focused',
         ]

From 7924d58e397e0269c2cf2ac9b3143590c0e27a28 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 30 Jan 2026 17:20:54 -0500
Subject: [PATCH 10/11] fix(range): add focus back to the range for keyboard
 movements

---
 core/src/components/range/range.tsx | 47 ++++++++++-------------------
 1 file changed, 16 insertions(+), 31 deletions(-)

diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index b664e032708..184d7c7e9b1 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -73,6 +73,7 @@ export class Range implements ComponentInterface {
   private contentEl: HTMLElement | null = null;
   private initialContentScrollY = true;
   private originalIonInput?: EventEmitter<RangeChangeEventDetail>;
+  private focusFromPointer = false;
 
   @Element() el!: HTMLIonRangeElement;
 
@@ -533,12 +534,6 @@ export class Range implements ComponentInterface {
     // update the active knob's position
     this.update(currentX);
 
-    /**
-     * Blur the knob so focus styles are cleared.
-     */
-    const knobEl = this.getKnobElement(this.pressedKnob);
-    knobEl?.blur();
-
     /**
      * Reset the pressed knob to undefined since the user
      * may start dragging a different knob in the next gesture event.
@@ -583,17 +578,6 @@ export class Range implements ComponentInterface {
       ratio = 1 - ratio;
     }
     this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
-
-    this.setFocus(this.pressedKnob);
-  }
-
-  /**
-   * Returns the DOM element for the given knob.
-   */
-  private getKnobElement(knob: KnobName): HTMLElement | null {
-    return this.el.shadowRoot?.querySelector(
-      knob === 'A' ? '.range-knob-handle-a' : '.range-knob-handle-b'
-    ) as HTMLElement | null;
   }
 
   private get valA() {
@@ -664,13 +648,6 @@ export class Range implements ComponentInterface {
     this.noUpdate = false;
   }
 
-  private setFocus(knob: KnobName) {
-    if (this.el.shadowRoot) {
-      const knobEl = this.getKnobElement(knob);
-      knobEl?.focus();
-    }
-  }
-
   private onBlur = () => {
     if (this.hasFocus) {
       this.hasFocus = false;
@@ -687,7 +664,16 @@ export class Range implements ComponentInterface {
   };
 
   private onKnobFocus = (knob: KnobName) => {
-    this.focusedKnob = knob;
+    // Clicking focuses the range which is needed for the keyboard,
+    // but we only want to add the ion-focused class when focused via Tab.
+    if (!this.focusFromPointer) {
+      this.focusedKnob = knob;
+    } else {
+      this.focusFromPointer = false;
+      this.focusedKnob = undefined;
+    }
+
+    // If the knob was not already focused, emit the focus event
     if (!this.hasFocus) {
       this.hasFocus = true;
       this.ionFocus.emit();
@@ -818,6 +804,9 @@ export class Range implements ComponentInterface {
       <div
         class="range-slider"
         ref={(rangeEl) => (this.rangeSlider = rangeEl)}
+        onPointerDown={() => {
+          this.focusFromPointer = true;
+        }}
         /**
          * Since the gesture has a threshold, the value
          * won't change until the user has dragged past
@@ -830,6 +819,8 @@ export class Range implements ComponentInterface {
          * we need to listen for the "pointerUp" event.
          */
         onPointerUp={(ev: PointerEvent) => {
+          this.focusFromPointer = false;
+
           /**
            * If the user drags the knob on the web
            * version (does not occur on mobile),
@@ -1044,12 +1035,6 @@ const renderKnob = (
 
   return (
     <div
-      onMouseDown={(ev) => {
-        /**
-         * Prevent the knob from being focused when the user clicks on it.
-         */
-        ev.preventDefault();
-      }}
       onKeyDown={(ev: KeyboardEvent) => {
         const key = ev.key;
         if (key === 'ArrowLeft' || key === 'ArrowDown') {

From 6c5bfacf9321bcf07d1c97c09e1a2bfcc6de0f0a Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 30 Jan 2026 17:21:51 -0500
Subject: [PATCH 11/11] test(range): update custom test to include lower/upper
 parts

---
 .../components/range/test/custom/index.html   | 186 +++++++++++++-----
 1 file changed, 136 insertions(+), 50 deletions(-)

diff --git a/core/src/components/range/test/custom/index.html b/core/src/components/range/test/custom/index.html
index bd8be71bef0..2a5f2206443 100644
--- a/core/src/components/range/test/custom/index.html
+++ b/core/src/components/range/test/custom/index.html
@@ -14,7 +14,20 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <style>
-    /* 1st Custom Range */
+    h2 {
+      font-size: 12px;
+      font-weight: normal;
+
+      color: #6f7378;
+
+      margin-top: 10px;
+      margin-left: 5px;
+    }
+
+    /**
+     * 1st Custom Range: All Parts
+     * -----------------------------------
+     */
     .range-part::part(bar) {
       background: red;
     }
@@ -53,14 +66,17 @@
       background: orange;
     }
 
-    /* 2nd Custom Range: Single Knob */
-    .custom-knobs {
+    /**
+     * Shared Custom Knob Styles
+     * -----------------------------------
+     */
+    .custom-knobs-range {
       --color-blue-light: #3b82f6;
       --color-blue-primary: var(--ion-color-primary, #0054e9);
       --color-blue-dark: #1e3a8a;
     }
 
-    .custom-knobs::part(knob-handle) {
+    .custom-knobs-range::part(knob-handle) {
       --custom-knob-width: 50px;
       --custom-knob-height: 25px;
 
@@ -76,7 +92,7 @@
       transform-origin: center center;
     }
 
-    .custom-knobs::part(knob) {
+    .custom-knobs-range::part(knob) {
       background: rgba(255, 255, 255, 0.5);
       backdrop-filter: blur(10px);
 
@@ -93,106 +109,145 @@
     }
 
     /* Pressed knob */
-    .custom-knobs::part(knob pressed) {
+    .custom-knobs-range::part(knob pressed) {
       background: var(--color-blue-primary);
     }
 
     /* Hover/focus indicator */
-    .custom-knobs::part(knob)::before {
+    .custom-knobs-range::part(knob)::before {
       width: 100%;
       height: 100%;
       border-radius: inherit;
     }
 
     /* Pressed/focused knob hover/focus indicator */
-    .custom-knobs::part(knob pressed)::before,
-    .custom-knobs::part(knob focused)::before {
+    .custom-knobs-range::part(knob pressed)::before,
+    .custom-knobs-range::part(knob focused)::before {
       transform: scale(1);
     }
 
+    /* Displayed knob values */
+    .custom-knobs-range .knob-value {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 36px;
+      height: 36px;
+
+      border: 1px solid #000;
+      border-radius: 4px;
+    }
+
     /* TODO hover states */
 
     /* iOS offset is larger than MD due to not having a bottom arrow */
-    .ios.custom-knobs {
+    .ios.custom-knobs-range {
       --pin-offset: 8px;
     }
 
-    .md.custom-knobs {
+    .md.custom-knobs-range {
       --pin-offset: 4px;
     }
 
-    .ios.custom-knobs {
+    .ios.custom-knobs-range {
       padding-top: 40px;
     }
 
-    .ios.custom-knobs::part(pin) {
+    .ios.custom-knobs-range::part(pin) {
       border-radius: 50%;
       background-color: var(--color-blue-primary);
       color: #fff;
     }
 
     /* Move the pin up so it sits above the taller custom knob when pressed/focused */
-    .custom-knobs::part(pin pressed),
-    .custom-knobs::part(pin focused) {
+    .custom-knobs-range::part(pin pressed),
+    .custom-knobs-range::part(pin focused) {
       transform: translate3d(0, calc(-100% - (var(--custom-knob-height) / 2) + var(--pin-offset)), 0) scale(1);
     }
 
-    .custom-knobs [slot='start'] {
+    .custom-knobs-range [slot='start'] {
       margin-inline-end: 36px;
     }
 
-    .custom-knobs [slot='end'] {
+    .custom-knobs-range [slot='end'] {
       margin-inline-start: 36px;
     }
 
-    /* 3rd Custom Range: Dual Knobs */
-    .custom-knobs.range-dual-knobs::part(knob-a) {
+    /**
+     * 2nd Custom Range: Single Knob
+     * -----------------------------------
+     */
+
+    /* Pressed knob */
+    #single-knob-range::part(knob pressed) {
+      background: var(--color-blue-primary);
+    }
+
+    /**
+     * 3rd Custom Range: Dual Knobs
+     *     Knobs Lower & Upper
+     * -----------------------------------
+     */
+
+    /* Knob lower */
+    #lower-upper-dual-knobs-range::part(knob-lower) {
       border-radius: 50% 0 0 50%;
     }
 
-    .custom-knobs.range-dual-knobs::part(knob-b) {
+    /* Knob upper */
+    #lower-upper-dual-knobs-range::part(knob-upper) {
       border-radius: 0 50% 50% 0;
     }
 
-    /* Pressed knob a */
-    .custom-knobs::part(knob-a pressed) {
+    /* Pressed knob lower */
+    #lower-upper-dual-knobs-range::part(knob-lower pressed) {
       background: var(--color-blue-light);
     }
 
-    /* Pressed knob b */
-    .custom-knobs::part(knob-b pressed) {
+    /* Pressed knob upper */
+    #lower-upper-dual-knobs-range::part(knob-upper pressed) {
       background: var(--color-blue-dark);
     }
 
-    .custom-knobs.range-dual-knobs::part(pin-a),
-    .custom-knobs.range-dual-knobs::part(pin-a):before {
+    /* Pin lower */
+    #lower-upper-dual-knobs-range.range-dual-knobs::part(pin-lower),
+    #lower-upper-dual-knobs-range.range-dual-knobs::part(pin-lower):before {
       background: var(--color-blue-light);
     }
 
-    .custom-knobs.range-dual-knobs::part(pin-b),
-    .custom-knobs.range-dual-knobs::part(pin-b):before {
+    /* Pin upper */
+    #lower-upper-dual-knobs-range.range-dual-knobs::part(pin-upper),
+    #lower-upper-dual-knobs-range.range-dual-knobs::part(pin-upper):before {
       background: var(--color-blue-dark);
     }
 
-    /* Displayed knob values */
-    .custom-knobs.range-dual-knobs .knob-value {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    /**
+     * 4th Custom Range: Dual Knobs
+     *       Knobs A & B
+     * -----------------------------------
+     */
 
-      width: 36px;
-      height: 36px;
+    /* Pressed knob A */
+    #a-b-dual-knobs-range::part(knob-a pressed) {
+      background: var(--color-blue-light);
+    }
 
-      border: 1px solid #000;
-      border-radius: 4px;
+    /* Pressed knob B */
+    #a-b-dual-knobs-range::part(knob-b pressed) {
+      background: var(--color-blue-dark);
     }
 
-    .custom-knobs.range-dual-knobs [slot='start'] {
-      border-color: var(--color-blue-light);
+    /* Pin A */
+    #a-b-dual-knobs-range.range-dual-knobs::part(pin-a),
+    #a-b-dual-knobs-range.range-dual-knobs::part(pin-a):before {
+      background: var(--color-blue-light);
     }
 
-    .custom-knobs.range-dual-knobs [slot='end'] {
-      border-color: var(--color-blue-dark);
+    /* Pin B */
+    #a-b-dual-knobs-range.range-dual-knobs::part(pin-b),
+    #a-b-dual-knobs-range.range-dual-knobs::part(pin-b):before {
+      background: var(--color-blue-dark);
     }
   </style>
   <body>
@@ -205,6 +260,7 @@
 
       <ion-content class="ion-padding">
         <!-- 1st Custom Range -->
+        <h2>Custom Range</h2>
         <ion-range
           class="range-part"
           min="-200"
@@ -217,9 +273,10 @@
         ></ion-range>
 
         <!-- 2nd Custom Range: Single Knob -->
+        <h2>Custom Range: Single Knob</h2>
         <ion-range
           id="single-knob-range"
-          class="custom-knobs"
+          class="custom-knobs-range"
           step="5"
           snaps="true"
           pin="true"
@@ -234,10 +291,26 @@
           </span>
         </ion-range>
 
-        <!-- 3rd Custom Range: Dual Knobs -->
+        <!-- 3rd Custom Range: Dual Knobs with Knob Lower & Upper -->
+        <h2>Custom Range: Dual Knobs with Knob Lower & Upper</h2>
         <ion-range
-          id="dual-knobs-range"
-          class="custom-knobs"
+          id="lower-upper-dual-knobs-range"
+          class="custom-knobs-range range-lower-upper-knobs"
+          step="5"
+          snaps="true"
+          pin="true"
+          dual-knobs="true"
+          aria-label="Custom Lower & Upper Knobs Range"
+        >
+          <div slot="start" class="knob-value"></div>
+          <div slot="end" class="knob-value"></div>
+        </ion-range>
+
+        <!-- 4th Custom Range: Dual Knobs with Knob A & B -->
+        <h2>Custom Range: Dual Knobs with Knob A & B</h2>
+        <ion-range
+          id="a-b-dual-knobs-range"
+          class="custom-knobs-range"
           step="5"
           snaps="true"
           pin="true"
@@ -257,20 +330,33 @@
         upper: '100',
       };
 
-      const dualKnobs = document.getElementById('dual-knobs-range');
-      dualKnobs.value = {
+      const lowerUpperKnobs = document.getElementById('lower-upper-dual-knobs-range');
+      lowerUpperKnobs.value = {
+        lower: '40',
+        upper: '60',
+      };
+
+      const abDualKnobs = document.getElementById('a-b-dual-knobs-range');
+      abDualKnobs.value = {
         lower: '25',
         upper: '75',
       };
 
       function updateDisplayedKnobValues() {
-        document.querySelector('#dual-knobs-range [slot="start"]').textContent = dualKnobs.value.lower;
-        document.querySelector('#dual-knobs-range [slot="end"]').textContent = dualKnobs.value.upper;
+        document.querySelector('#lower-upper-dual-knobs-range [slot="start"]').textContent =
+          lowerUpperKnobs.value.lower;
+        document.querySelector('#lower-upper-dual-knobs-range [slot="end"]').textContent = lowerUpperKnobs.value.upper;
+        document.querySelector('#a-b-dual-knobs-range [slot="start"]').textContent = abDualKnobs.value.lower;
+        document.querySelector('#a-b-dual-knobs-range [slot="end"]').textContent = abDualKnobs.value.upper;
       }
 
       updateDisplayedKnobValues();
 
-      dualKnobs.addEventListener('ionChange', () => {
+      lowerUpperKnobs.addEventListener('ionChange', () => {
+        updateDisplayedKnobValues();
+      });
+
+      abDualKnobs.addEventListener('ionChange', () => {
         updateDisplayedKnobValues();
       });
     </script>