feat(range): add class and expose parts for dual knobs for custom styling

[brandyscarney]

Issue number: resolves #29862

---

What is the current behavior?

Range exposes a single part for both knobs & pins. This makes it impossible to style the knobs/pins differently when dual knobs is enabled.

What is the new behavior?

• Fixes a bug where the knobs would swap A & B when they cross over each other
• Fixes the focus behavior so that dual knobs act the same as a single knob range when focusing a knob
• Adds range-dual-knobs to the host element when dualKnobs is enabled
• Adds parts for the following:
  • knob-handle-a - The container element for the first knob. Only available when dualKnobs is true.
  • knob-handle-b - The container element for the second knob. Only available when dualKnobs is true.
  • knob-handle-lower - The container element for the lower knob. Only available when dualKnobs is true.
  • knob-handle-upper - The container element for the upper knob. Only available when dualKnobs is true.
  • pin-a - The counter that appears above the first knob. Only available when dualKnobs is true.
  • pin-b - The counter that appears above the second knob. Only available when dualKnobs is true.
  • pin-lower - The counter that appears above the lower knob. Only available when dualKnobs is true.
  • pin-upper - The counter that appears above the upper knob. Only available when dualKnobs is true.
  • knob-a - The visual knob element for the first knob. Only available when dualKnobs is true.
  • knob-b - The visual knob element for the second knob. Only available when dualKnobs is true.
  • knob-lower - The visual knob element for the lower knob. Only available when dualKnobs is true.
  • knob-upper - The visual knob element for the upper knob. Only available when dualKnobs is true.
  • 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.
  • focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time.
  • hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 8.7.17-dev.11770147425.1bfcd5e5

• Basic Preview
• Custom Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Feb 4, 2026 3:35pm

[brandyscarney]

This change is required otherwise it won't match knob when it has knob knob-a.

[brandyscarney]

I renamed the classes assigned to knob-handle from range-knob-a to range-knob-handle-a to match what they are actually applied to.

[brandyscarney]

I removed the screenshots here in favor of checking that the styles are applied to the right element when the part is styled.

[brandyscarney]

I added these parts for the different range states which is used like this:

ion-range::part(knob hover),
ion-range::part(knob focused),
ion-range::part(knob pressed) {
  background: var(--color-blue-primary);
}

However, I could also see an argument for adding these as classes to the main range like this (or similarly named classes):

<ion-range class="knob-focused knob-a-focused knob-lower-focused">

Then users could style them like this:

ion-range.knob-hover::part(knob),
ion-range.knob-focused::part(knob),
ion-range.knob-pressed::part(knob) {
  background: var(--color-blue-primary);
}