From 3ad71e90aaebb00cdb20f36e676023181754ec28 Mon Sep 17 00:00:00 2001
From: ShryukGrandhi <85529990+ShryukGrandhi@users.noreply.github.com>
Date: Fri, 23 Oct 2026 03:38:25 -0700
Subject: [PATCH] fix(range): allow clicking ticks that extend past the slider

Signed-off-by: ShryukGrandhi <85529990+ShryukGrandhi@users.noreply.github.com>
---
 core/src/components/range/range.ios.scss      |  1 -
 core/src/components/range/range.md.scss       |  1 -
 .../components/range/test/range-events.e2e.ts | 46 +++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss
index cb78e1ee043..b6127a27172 100644
--- a/core/src/components/range/range.ios.scss
+++ b/core/src/components/range/range.ios.scss
@@ -86,7 +86,6 @@
   height: $range-ios-tick-height;
 
   background: $range-ios-tick-background-color;
-  pointer-events: none;
 }
 
 .range-tick-active {
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index 39315680c0c..7660a464110 100644
--- a/core/src/components/range/range.md.scss
+++ b/core/src/components/range/range.md.scss
@@ -128,7 +128,6 @@
   background: var(--bar-background-active);
 
   z-index: 1;
-  pointer-events: none;
 }
 
 .range-tick-active {
diff --git a/core/src/components/range/test/range-events.e2e.ts b/core/src/components/range/test/range-events.e2e.ts
index f76d147627b..cd1aa05b58d 100644
--- a/core/src/components/range/test/range-events.e2e.ts
+++ b/core/src/components/range/test/range-events.e2e.ts
@@ -284,3 +284,49 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+
+/**
+ * The tick dimensions vary across modes.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('range: tick events'), () => {
+    test('should select the max value when the last tick is clicked', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30738',
+      });
+
+      await page.setContent(
+        `
+        <style>
+          ion-range::part(tick),
+          ion-range::part(tick-active) {
+            width: 20px;
+          }
+        </style>
+        <div style="padding: 0 40px">
+          <ion-range aria-label="Range" min="0" max="10" step="1" value="0" snaps="true" ticks="true"></ion-range>
+        </div>
+      `,
+        config
+      );
+
+      const range = page.locator('ion-range');
+      const ionChangeSpy = await page.spyOnEvent('ionChange');
+
+      const lastTick = range.locator('.range-tick').last();
+      const tickBox = (await lastTick.boundingBox())!;
+      const sliderBox = (await range.locator('.range-slider').boundingBox())!;
+
+      // Click the part of the tick that sits past the end of the slider.
+      const x = (sliderBox.x + sliderBox.width + tickBox.x + tickBox.width) / 2;
+      const y = tickBox.y + tickBox.height / 2;
+
+      await page.mouse.click(x, y);
+
+      await ionChangeSpy.next();
+
+      expect(ionChangeSpy).toHaveReceivedEventDetail({ value: 10 });
+    });
+  });
+});