feat(range): add classes and expose parts to allow individual styling of dual knobs by brandyscarney · Pull Request #30941 · ionic-team/ionic-framework

brandyscarney · 2026-01-29T19:52:56Z

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 the following classes to the host element when dualKnobs is enabled:
- range-dual-knobs
- range-pressed-a when the knob with name A is pressed
- range-pressed-b when the knob with name B is pressed
- range-pressed-lower when the lower knob is pressed
- range-pressed-upper when the upper knob is pressed
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.
- activated - Added to the knob-handle, knob, and pin when the knob is activated. Only one set has this part at a time.
Adds e2e tests for the following:
- customizing label part
- customizing bar parts
- customizing pin parts
- customizing tick parts
- customizing knob parts
- customizing dual knob a & b parts
- customizing dual knob lower & upper parts
- verifies that a & b parts stay on the original elements but lower & upper parts swap when the values swap
Adds spec tests for the following:
- css classes
  - value state classes
  - boolean property classes
  - pressed state classes
- shadow parts
  - static shadow parts
    - verifies the shadow parts exist based on the existence of certain range properties
  - state shadow parts
    - verifies the shadow parts exist based on the state of the range knob (pressed, focused, activated, hover)

Does this introduce a breaking change?

Yes
No

Other information

Dev build: 8.7.17-dev.11771959013.18adabe2

vercel · 2026-01-29T19:53:02Z

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

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

brandyscarney · 2026-01-29T19:54:06Z

core/setupJest.js

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

brandyscarney · 2026-01-29T19:54:59Z

core/src/components/range/test/basic/range.spec.ts

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 · 2026-01-29T19:55:31Z

core/src/components/range/test/custom/range.e2e.ts

-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);


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

…ucture

brandyscarney · 2026-02-24T16:56:24Z

core/src/components/range/range.tsx

+ * @part activated - Added to the knob-handle, knob, and pin when the knob is activated (has the `ion-activated` class). Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time 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 when `dualKnobs` is `true`.


In other components we add this as the part it works with like this:

* @part wheel-item active - The currently selected wheel-item. * @part time-button active - The time picker button when the picker is open.

but it seemed like a lot to add all of these:

Details

/** * @part knob-handle - The container element that wraps the knob and handles drag interactions. * @part knob-handle activated - The activated knob-handle. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle focused - The focused knob-handle. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle hover - The hovered knob-handle. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle pressed - The pressed knob-handle. Only one set has this part at a time when `dualKnobs` is `true`. * * @part knob-handle-a - The container element for the first knob. Only available when `dualKnobs` is `true`. * @part knob-handle-a activated - The activated knob-handle-a. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-a focused - The focused knob-handle-a. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-a hover - The hovered knob-handle-a. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-a pressed - The pressed knob-handle-a. Only one set has this part at a time when `dualKnobs` is `true`. * * @part knob-handle-b - The container element for the second knob. Only available when `dualKnobs` is `true`. * @part knob-handle-b activated - The activated knob-handle-b. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-b focused - The focused knob-handle-b. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-b hover - The hovered knob-handle-b. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-b pressed - The pressed knob-handle-b. Only one set has this part at a time when `dualKnobs` is `true`. * * @part knob-handle-lower - The container element for the lower knob. Only available when `dualKnobs` is `true`. * @part knob-handle-lower activated - The activated knob-handle-lower. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-lower focused - The focused knob-handle-lower. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-lower hover - The hovered knob-handle-lower. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-lower pressed - The pressed knob-handle-lower. Only one set has this part at a time when `dualKnobs` is `true`. * * @part knob-handle-upper - The container element for the upper knob. Only available when `dualKnobs` is `true`. * @part knob-handle-upper activated - The activated knob-handle-upper. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-upper focused - The focused knob-handle-upper. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-upper hover - The hovered knob-handle-upper. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-handle-upper pressed - The pressed knob-handle-upper. Only one set has this part at a time when `dualKnobs` is `true`. * * @part pin - The counter that appears above a knob. * @part pin activated - The activated pin. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin focused - The focused pin. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin hover - The hovered pin. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin pressed - The pressed pin. Only one set has this part at a time when `dualKnobs` is `true`. * * @part pin-a - The counter that appears above the first knob. Only available when `dualKnobs` is `true`. * @part pin-a activated - The activated pin-a. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-a focused - The focused pin-a. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-a hover - The hovered pin-a. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-a pressed - The pressed pin-a. Only one set has this part at a time when `dualKnobs` is `true`. * * @part pin-b - The counter that appears above the second knob. Only available when `dualKnobs` is `true`. * @part pin-b activated - The activated pin-b. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-b focused - The focused pin-b. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-b hover - The hovered pin-b. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-b pressed - The pressed pin-b. Only one set has this part at a time when `dualKnobs` is `true`. * * @part pin-lower - The counter that appears above the lower knob. Only available when `dualKnobs` is `true`. * @part pin-lower activated - The activated pin-lower. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-lower focused - The focused pin-lower. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-lower hover - The hovered pin-lower. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-lower pressed - The pressed pin-lower. Only one set has this part at a time when `dualKnobs` is `true`. * * @part pin-upper - The counter that appears above the upper knob. Only available when `dualKnobs` is `true`. * @part pin-upper activated - The activated pin-upper. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-upper focused - The focused pin-upper. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-upper hover - The hovered pin-upper. Only one set has this part at a time when `dualKnobs` is `true`. * @part pin-upper pressed - The pressed pin-upper. Only one set has this part at a time when `dualKnobs` is `true`. * * @part knob - The visual knob element that appears on the range track. * @part knob activated - The activated knob. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob focused - The focused knob. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob hover - The hovered knob. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob pressed - The pressed knob. Only one set has this part at a time when `dualKnobs` is `true`. * * @part knob-a - The visual knob element for the first knob. Only available when `dualKnobs` is `true`. * @part knob-a activated - The activated knob-a. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-a focused - The focused knob-a. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-a hover - The hovered knob-a. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-a pressed - The pressed knob-a. Only one set has this part at a time when `dualKnobs` is `true`. * * @part knob-b - The visual knob element for the second knob. Only available when `dualKnobs` is `true`. * @part knob-b activated - The activated knob-b. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-b focused - The focused knob-b. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-b hover - The hovered knob-b. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-b pressed - The pressed knob-b. Only one set has this part at a time when `dualKnobs` is `true`. * * @part knob-lower - The visual knob element for the lower knob. Only available when `dualKnobs` is `true`. * @part knob-lower activated - The activated knob-lower. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-lower focused - The focused knob-lower. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-lower hover - The hovered knob-lower. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-lower pressed - The pressed knob-lower. Only one set has this part at a time when `dualKnobs` is `true`. * * @part knob-upper - The visual knob element for the upper knob. Only available when `dualKnobs` is `true`. * @part knob-upper activated - The activated knob-upper. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-upper focused - The focused knob-upper. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-upper hover - The hovered knob-upper. Only one set has this part at a time when `dualKnobs` is `true`. * @part knob-upper pressed - The pressed knob-upper. Only one set has this part at a time when `dualKnobs` is `true`. */

I vote to not include them. Anyone who works with parts are most likely familiar with how to group them so we shouldn't need the extra docs.

thetaPC · 2026-02-25T21:04:01Z

core/src/components/range/test/custom/index.html

        ></ion-range>
+
+        <!-- 2nd Custom Range: Single Knob -->
+        <h2>Custom Range: Single Knob</h2>


I've verified that I can click on the knob and then use the arrow keys to move the knob without ever dragging it. However, when I stop pressing on the knob, the value is reset to the original. I would assume that it would be changed to the value that I moved to with the arrow keys.

No issues with focusing and arrow keys, it updates the value as expected.

thetaPC · 2026-02-25T21:07:30Z

core/src/components/range/test/custom/index.html

        ></ion-range>
+
+        <!-- 2nd Custom Range: Single Knob -->
+        <h2>Custom Range: Single Knob</h2>


Verified the following but it can be hard to tell between the dark primary and the default. It would be great if it can be different colors to be make it more obvious.

Verify that the knob shows as the dark primary color when the knob is pressed and you drag the cursor down away from the range (activated)

Verify that the knob shows as the default primary color when the knob is being dragged (pressed)

thetaPC · 2026-02-25T21:40:48Z

core/src/components/range/test/custom/index.html

+        </ion-range>
+
+        <!-- 3rd Custom Range: Dual Knobs with Knob Lower & Upper -->
+        <h2>Custom Range: Dual Knobs with Knob Lower & Upper</h2>


I've verified that I can click on the knob and then use the arrow keys to move the knob without ever dragging it. However, when I stop pressing on the knob, the value is reset to the original. I would assume that it would be changed to the value that I moved to with the arrow keys.

No issues with focusing and arrow keys, it updates the value as expected.

thetaPC · 2026-02-25T21:44:39Z

core/src/components/range/test/custom/index.html

+        </ion-range>
+
+        <!-- 3rd Custom Range: Dual Knobs with Knob Lower & Upper -->
+        <h2>Custom Range: Dual Knobs with Knob Lower & Upper</h2>


Verified the following but it can be hard to tell between the light primary and the dark primary. It would be great if it can be different colors to be make it more obvious.

Verify that the knob shows as the light primary color when the lower knob is being dragged (pressed)

Verify that the knob shows as the dark primary color when the upper knob is being dragged (pressed)

thetaPC · 2026-02-26T17:06:17Z

core/src/components/range/test/custom/index.html

+        </ion-range>
+
+        <!-- 4th Custom Range: Dual Knobs with Knob A & B -->
+        <h2>Custom Range: Dual Knobs with Knob A & B</h2>


I've verified that I can click on the knob and then use the arrow keys to move the knob without ever dragging it. However, when I stop pressing on the knob, the value is reset to the original. I would assume that it would be changed to the value that I moved to with the arrow keys.

No issues with focusing and arrow keys, it updates the value as expected.

thetaPC · 2026-02-26T18:23:57Z

core/src/components/range/range.tsx

+ * @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`.


It would be beneficial to elaborate what lower and upper mean in terms of values.

thetaPC · 2026-02-26T18:25:41Z

core/src/components/range/range.tsx

+ * @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 activated - Added to the knob-handle, knob, and pin when the knob is activated (has the `ion-activated` class). Only one set has this part at a time when `dualKnobs` is `true`.


Do we need to point out that it has the ion-activated class? It feels like too much info.

thetaPC · 2026-02-26T18:27:21Z

core/src/components/range/range.tsx

+ * @part activated - Added to the knob-handle, knob, and pin when the knob is activated (has the `ion-activated` class). Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time 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 when `dualKnobs` is `true`.


I vote to not include them. Anyone who works with parts are most likely familiar with how to group them so we shouldn't need the extra docs.

thetaPC · 2026-02-26T18:28:28Z

core/src/components/range/range.tsx

+  private focusFromPointer = false;
+  private activatedObserver?: MutationObserver;


Let's add short comments for what these variables are for. It'll be great to be able to look at them and immediately know their purpose instead of reading through the code. Especially since they seem like they do complex work.

thetaPC · 2026-02-26T20:36:06Z

core/src/components/range/range.tsx

        'range-knob-max': value === max,
        'ion-activatable': true,
        'ion-focusable': true,
+        'ion-focused': focused,


This doesn't clash with ion-focusable?

brandyscarney added 7 commits January 27, 2026 15:38

feat(range): add knob parts for A and B when dualKnobs is enabled

ef2eb94

test(range): update references to old knob handle class

915bf05

test(range): add spec test for new css class and parts

67f605b

feat(range): add pin a and b parts

f57efc4

feat(range): add pressed and focused parts for knob-handle, knob and pin

83803c6

test(range): add pressed and focused parts to spec test

d5b2570

test(range): update custom test to check styles instead of screenshots

6741093

github-actions bot added the package: core @ionic/core package label Jan 29, 2026

brandyscarney commented Jan 29, 2026

View reviewed changes

Merge branch 'feature-8.8' into FW-6582

ac39d58

vercel bot deployed to Preview January 29, 2026 20:10 View deployment

brandyscarney changed the title ~~feat(range): add class and expose parts for dual knobs for easier styling~~ feat(range): add class and expose parts for dual knobs for custom styling Jan 30, 2026

brandyscarney added 2 commits January 30, 2026 14:10

test(range): target knob by handle a or b

a305510

feat(range): add upper and lower knob parts and fix related focus bugs

e617be3

vercel bot deployed to Preview January 30, 2026 20:34 View deployment

brandyscarney added 2 commits January 30, 2026 17:20

fix(range): add focus back to the range for keyboard movements

7924d58

test(range): update custom test to include lower/upper parts

6c5bfac

vercel bot deployed to Preview January 30, 2026 22:23 View deployment

brandyscarney added 2 commits February 3, 2026 14:24

feat(range): add hover part for knob-handle, knob and pin

f08715b

test(range): add hover styles to custom test

bfcd5e5

vercel bot deployed to Preview February 3, 2026 19:25 View deployment

test(range): update custom to have different hover styles

64c2fa2

vercel bot deployed to Preview February 3, 2026 20:00 View deployment

Merge branch 'feature-8.8' into FW-6582

0a920f7

vercel bot deployed to Preview February 4, 2026 15:35 View deployment

feat(range): apply range-pressed classes to host based on the knob

6fc5e15

vercel bot deployed to Preview February 20, 2026 20:16 View deployment

test(range): add test for range-pressed classes

9964121

vercel bot deployed to Preview February 20, 2026 20:33 View deployment

brandyscarney changed the title ~~feat(range): add class and expose parts for dual knobs for custom styling~~ feat(range): add classes and expose parts for dual knobs for custom styling Feb 20, 2026

feat(range): add the activated part for handle, knob and pin

4f4c2cf

vercel bot deployed to Preview February 20, 2026 22:00 View deployment

fix(range): check for MutationObserver

d63cdd6

vercel bot deployed to Preview February 23, 2026 18:23 View deployment

brandyscarney added 3 commits February 23, 2026 14:38

test(range): clean up duplicated part checks

8522c1a

test(range): add tests for the dual knob lower and upper parts, restr…

524469f

…ucture

test(range): add a test for swapping the knobs

4fb4aca

vercel bot deployed to Preview February 23, 2026 21:31 View deployment

test(range): add check for label part

d3b2332

vercel bot deployed to Preview February 23, 2026 21:54 View deployment

brandyscarney added 2 commits February 24, 2026 11:47

test(range): add spec tests for shadow part states

8436dd0

Merge branch 'feature-8.8' into FW-6582

8adabe2

vercel bot deployed to Preview February 24, 2026 16:49 View deployment

brandyscarney commented Feb 24, 2026

View reviewed changes

brandyscarney changed the title ~~feat(range): add classes and expose parts for dual knobs for custom styling~~ feat(range): add classes and expose parts to allow individual styling of dual knobs Feb 24, 2026

brandyscarney marked this pull request as ready for review February 24, 2026 17:02

brandyscarney requested a review from a team as a code owner February 24, 2026 17:02

brandyscarney requested a review from BenOsodrac February 24, 2026 17:02

thetaPC requested changes Feb 26, 2026

View reviewed changes

		* @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`.

		private focusFromPointer = false;
		private activatedObserver?: MutationObserver;

Conversation

brandyscarney commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

brandyscarney commented Jan 29, 2026 •

edited

Loading

vercel bot commented Jan 29, 2026 •

edited

Loading

brandyscarney Feb 24, 2026 •

edited

Loading