We’re excited to announce the release of Ionic Framework 8.8! This update makes customizing components easier and more flexible by adding new CSS classes, exposing internal elements through CSS Shadow Parts, and introducing new events for the Modal and Refresher components.

Many of the features in this release support community-driven projects adapting Ionic Framework to implement both the latest iOS design system (Liquid Glass) and a Material Design 3 theme, giving developers the tools to create modern, fully branded design systems.

Take a look at the new features that make customizing Ionic Framework simpler and more flexible.

New Drag Events for Sheet & Card Modals

Modals now expose new drag events that let you hook into the complete drag lifecycle. With detailed movement data available, you can respond to position, velocity, progress, and breakpoint changes in real time, enabling richer, more interactive experiences.

New Events

ionDragStart — fires at the start of the drag gesture without any details
ionDragMove — fires continuously while the modal is being dragged with currentY, deltaY, velocityY, progress, and, for sheet modals, snapBreakpoint
ionDragEnd — fires at the end of the drag gesture with currentY, deltaY, velocityY, progress, and, for sheet modals, snapBreakpoint

These events make it possible to coordinate surrounding UI with the gesture. As the modal moves, you can reveal or conceal headers, footers, tab bars, or other interface elements, adjust layout and styling based on progress, and react instantly as the modal shifts position or approaches a breakpoint.

For more information, refer to the Modal documentation.

Enhanced Dual Knob Support in Range

Range now includes significant improvements to dual knob behavior, bringing more predictable interactions and powerful new styling capabilities.

We fixed an issue where knob identities (A and B) would unintentionally swap when crossing over each other. Knobs now retain their static identity, ensuring consistent behavior and styling.

Beyond behavior improvements, Range now exposes additional host classes and Shadow Parts when dualKnobs is enabled, giving you complete control over styling and interaction states.

New Host Classes

When dualKnobs is enabled, the following classes will be applied to the host element:

range-dual-knobs — always applied
range-pressed-a — applied when the knob with identity A is pressed
range-pressed-b — applied when the knob with identity B is pressed
range-pressed-lower — applied when the knob with position lower is pressed
range-pressed-upper — applied when the knob with position upper is pressed

These classes allow you to style the component based on the existence of the dualKnobs property and which knob is currently being interacted with.

New Shadow Parts

Dual knob ranges now support two styling models:

Static Identity (A / B)
These parts always refer to the same physical knob, even if the knobs cross.

knob-handle-a, knob-handle-b — applied to the handle of the knob with identity A or B, respectively
knob-a, knob-b — applied to the knob itself with identity A or B
pin-a, pin-b — applied to the pin of the knob with identity A or B

Dynamic Position (Lower / Upper)
These parts reflect the knob’s current value position. If the knobs cross, these parts swap automatically.

knob-handle-lower, knob-handle-upper — applied to the knob handle in the lower or upper position, respectively
knob-lower, knob-upper — applied to the knob itself in the lower or upper position
pin-lower, pin-upper — applied to the pin of the knob in the lower or upper position

This makes it possible to style knobs either by consistent identity or by their relative position within the range.

New State Parts

To support advanced interaction styling, Range now applies state parts to the active knob’s handle, knob, and pin:

activated — applied when the knob is active
focused — applied when the knob is focused
hover — applied when the knob is hovered
pressed — applied when the knob is being pressed

Only one set of these state parts is applied at a time when dualKnobs is enabled, ensuring only the knob that has that state will be styled.

These updates make dual knob ranges more reliable, more accessible, and significantly more customizable. Build advanced filtering controls, price selectors, or ranges fully branded to match your design system.

For more information, refer to the Range documentation.

New Pull Events for Refresher

Refresher now emits two new events that give more visibility into the pull gesture lifecycle, letting you respond to user interactions in real time. You can detect exactly when a user starts pulling, and when the refresher has fully returned to its inactive state, including whether the pull completed successfully or was canceled.

New Events

ionPullStart — fires when the user begins pulling down, without any details
ionPullEnd — fires after the refresher returns to its inactive state, with a reason property ('complete' or 'cancel') indicating how the pull gesture ended

Deprecated Event

ionStart has been deprecated in favor of ionPullStart to improve consistency across event names. Going forward, event names follow a structure of action + timing (such as Start, Move, or End) to make their purpose more explicit and to allow for better scalability as new events are added.

The event payload is unchanged, so migrating only requires updating the event name.

Example Migration:

// Before
refresher.addEventListener('ionStart', () => {
 console.log('Pull Start');
});

// After
refresher.addEventListener('ionPullStart', () => {
 console.log('Pull Start');
});

For more information, refer to the Refresher documentation.

New Drag Events for Sheet & Card Modals

New Events

Enhanced Dual Knob Support in Range

New Host Classes

New Shadow Parts

New State Parts

New Pull Events for Refresher

New Events

Deprecated Event

New CSS Shadow P...

Ionic Blog

Message History

Delivery option(s)