From b33d6b3be9c0fc89f90743ecb843c07c9b60ddf9 Mon Sep 17 00:00:00 2001
From: Raphael Fakhri <153192858+RaphaelFakhri@users.noreply.github.com>
Date: Sat, 24 Oct 2026 18:43:15 +0000
Subject: [PATCH] fix(range): allow clicking the last tick to select the max
 value

---
 core/src/components/range/range.ios.scss      |  1 -
 core/src/components/range/range.md.scss       |  8 +++-
 .../components/range/test/range-events.e2e.ts | 48 +++++++++++++++++++
 3 files changed, 55 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..b8be38f7163 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 {
@@ -212,6 +211,13 @@
 }
 
 .range-knob-handle {
+  /**
+   * Place the knob handle above the ticks so that
+   * pressing the knob reaches the handle instead
+   * of the tick underneath it.
+   */
+  z-index: 2;
+
   &.ion-activated .range-knob:before,
   &.ion-focused .range-knob:before,
   &.range-knob-pressed .range-knob:before {
diff --git a/core/src/components/range/test/range-events.e2e.ts b/core/src/components/range/test/range-events.e2e.ts
index f76d147627b..fd27a32a493 100644
--- a/core/src/components/range/test/range-events.e2e.ts
+++ b/core/src/components/range/test/range-events.e2e.ts
@@ -284,3 +284,51 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+
+/**
+ * The last tick sticks out past the end of the slider by a
+ * different amount in each mode, so this is tested in both modes.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('range: events: ticks'), () => {
+    test('should select the max value when clicking the last tick', 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" value="20" step="10" snaps="true" ticks="true"></ion-range>
+        </div>
+      `,
+        config
+      );
+
+      const range = page.locator('ion-range');
+      const ionChangeSpy = await page.spyOnEvent('ionChange');
+
+      const sliderBox = await range.locator('.range-slider').boundingBox();
+      const lastTickBox = await range.locator('.range-tick').last().boundingBox();
+
+      // Click the part of the last tick that sticks out past the end of the slider.
+      const sliderEnd = sliderBox!.x + sliderBox!.width;
+      const lastTickEnd = lastTickBox!.x + lastTickBox!.width;
+      expect(lastTickEnd).toBeGreaterThan(sliderEnd + 2);
+
+      await page.mouse.click((sliderEnd + lastTickEnd) / 2, lastTickBox!.y + lastTickBox!.height / 2);
+
+      await ionChangeSpy.next();
+
+      expect(ionChangeSpy).toHaveReceivedEventDetail({ value: 100 });
+    });
+  });
+});