fix(range): allow clicking the last tick to select the max value

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 {

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 {

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