[ShryukGrandhi]

Issue number: resolves #30738

---

What is the current behavior?

Tick marks have pointer-events: none, so clicks pass through them to whatever is underneath. ion-range only listens for pointer events on .range-slider, and the last tick is positioned at left: 100%, so the part of it that hangs past the end of the slider (half the tick in ios, the whole tick in md) doesn't hit the slider at all. Clicking it does nothing. This gets very noticeable once the ticks are widened with ::part(tick).

What is the new behavior?

• Removed pointer-events: none from .range-tick in the ios and md styles. Ticks are children of .range-slider, so a pointer event on any part of a tick now bubbles to the slider and goes through the existing gesture/tap handling. The position is already clamped to the slider bounds, so clicking the overhanging part of the last tick selects the max value (same for the first tick and the min value).
• Added an e2e test (both modes) that widens the ticks and clicks the part of the last tick that sits past the end of the slider, expecting ionChange with the max value.

Does this introduce a breaking change?

• Yes
• No

Other information

This is the same thing as the workaround in the issue (pointer-events: auto on the tick parts), just applied in the component.

Testing (Mobile Chrome):

• New test times out waiting for ionChange before the change in both ios and md, passes after.
• npx playwright test src/components/range --ignore-snapshots: everything passes except the 4 a11y tests, which fail identically on main (axe page-has-heading-one) and are unrelated.
• stylelint and eslint/prettier are clean on the touched files.

Fixes #30738

[vercel]

@ShryukGrandhi is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.