docs(range): document knob and position in ionKnobMoveStart and ionKnobMoveEnd event details

docs/api/range.mdx

@@ -107,7 +107,9 @@ import IonChangeEvent from '@site/static/usage/v9/range/ion-change-event/index.m
 
 ### Using `ionKnobMoveStart` and `ionKnobMoveEnd` {/* #using-ionknobmovestart-and-ionknobmoveend */}
 
-The `ionKnobMoveStart` event emits when the Range knob begins dragging, whether through mouse drag, touch gesture or keyboard interaction. Inversely, `ionKnobMoveEnd` emits when the Range knob is released. Both events emit with the `RangeValue` type and work in combination with the `dualKnobs` property.
+The `ionKnobMoveStart` event emits when the Range knob begins dragging, whether through mouse drag, touch gesture or keyboard interaction. Inversely, `ionKnobMoveEnd` emits when the Range knob is released. Both events emit a detail with the current `value` and work in combination with the `dualKnobs` property.
+
+The event detail also includes which knob moved, using the same static identity and dynamic position described in [CSS Shadow Parts](#css-shadow-parts). The `knob` property is the knob's static identity, `'A'` or `'B'`, and does not change if the knobs cross. The `position` property is whether that knob holds the `'lower'` or `'upper'` value. For `ionKnobMoveStart` it is the position before the knob moves, and for `ionKnobMoveEnd` it is the position after, so a knob dragged past the other knob reports `'lower'` on start and `'upper'` on end. A Range without `dualKnobs` always reports a `knob` of `'A'` and a `position` of `'lower'`.
 
 import IonKnobMoveEvent from '@site/static/usage/v9/range/ion-knob-move-event/index.mdx';
 
@@ -148,6 +150,8 @@ interface RangeChangeEventDetail {
 ```typescript
 interface RangeKnobMoveStartEventDetail {
   value: RangeValue;
+  knob: RangeKnobName;
+  position: RangeKnobPosition;
 }
 ```
 
@@ -156,6 +160,8 @@ interface RangeKnobMoveStartEventDetail {
 ```typescript
 interface RangeKnobMoveEndEventDetail {
   value: RangeValue;
+  knob: RangeKnobName;
+  position: RangeKnobPosition;
 }
 ```
 
@@ -170,6 +176,28 @@ interface RangeCustomEvent extends CustomEvent {
 }
 ```
 
+### RangeKnobMoveStartCustomEvent {/* #rangeknobmovestartcustomevent */}
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with the `ionKnobMoveStart` event.
+
+```typescript
+interface RangeKnobMoveStartCustomEvent extends CustomEvent {
+  detail: RangeKnobMoveStartEventDetail;
+  target: HTMLIonRangeElement;
+}
+```
+
+### RangeKnobMoveEndCustomEvent {/* #rangeknobmoveendcustomevent */}
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with the `ionKnobMoveEnd` event.
+
+```typescript
+interface RangeKnobMoveEndCustomEvent extends CustomEvent {
+  detail: RangeKnobMoveEndEventDetail;
+  target: HTMLIonRangeElement;
+}
+```
+
 ## Types {/* #types */}
 
 ### RangeValue {/* #rangevalue */}
@@ -178,6 +206,18 @@ interface RangeCustomEvent extends CustomEvent {
 type RangeValue = number | { lower: number; upper: number };
 ```
 
+### RangeKnobName {/* #rangeknobname */}
+
+```typescript
+type RangeKnobName = 'A' | 'B';
+```
+
+### RangeKnobPosition {/* #rangeknobposition */}
+
+```typescript
+type RangeKnobPosition = 'lower' | 'upper';
+```
+
 ## Properties {/* #properties */}
 
 <Props />

static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md

@@ -1,6 +1,8 @@
 ```html
 <ion-range
   aria-label="Range with knob events"
+  [dualKnobs]="true"
+  [value]="{ lower: 20, upper: 80 }"
   (ionKnobMoveStart)="onIonKnobMoveStart($event)"
   (ionKnobMoveEnd)="onIonKnobMoveEnd($event)"
 ></ion-range>

static/usage/v9/range/ion-knob-move-event/angular/example_component_ts.md

@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonRange, RangeCustomEvent } from '@ionic/angular';
+import { IonRange, RangeKnobMoveEndCustomEvent, RangeKnobMoveStartCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -9,12 +9,14 @@ import { IonRange, RangeCustomEvent } from '@ionic/angular';
   imports: [IonRange],
 })
 export class ExampleComponent {
-  onIonKnobMoveStart(event: RangeCustomEvent) {
-    console.log('ionKnobMoveStart:', event.detail.value);
+  onIonKnobMoveStart(event: RangeKnobMoveStartCustomEvent) {
+    const { knob, position, value } = event.detail;
+    console.log('ionKnobMoveStart:', knob, position, value);
   }
 
-  onIonKnobMoveEnd(event: RangeCustomEvent) {
-    console.log('ionKnobMoveEnd:', event.detail.value);
+  onIonKnobMoveEnd(event: RangeKnobMoveEndCustomEvent) {
+    const { knob, position, value } = event.detail;
+    console.log('ionKnobMoveEnd:', knob, position, value);
   }
 }
 ```

static/usage/v9/range/ion-knob-move-event/demo.html

@@ -21,20 +21,24 @@
       <ion-content>
         <div class="container">
           <div class="demo">
-            <ion-range aria-label="Range with knob events"></ion-range>
+            <ion-range aria-label="Range with knob events" dual-knobs="true"></ion-range>
           </div>
         </div>
       </ion-content>
     </ion-app>
     <script>
       const range = document.querySelector('ion-range');
+      range.value = {
+        lower: 20,
+        upper: 80,
+      };
 
       range.addEventListener('ionKnobMoveStart', ({ detail }) => {
-        console.log('ionKnobMoveStart:', detail.value);
+        console.log('ionKnobMoveStart:', detail.knob, detail.position, detail.value);
       });
 
       range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
-        console.log('ionKnobMoveEnd:', detail.value);
+        console.log('ionKnobMoveEnd:', detail.knob, detail.position, detail.value);
       });
     </script>
   </body>

static/usage/v9/range/ion-knob-move-event/javascript.md

@@ -1,15 +1,19 @@
 ```html
-<ion-range aria-label="Range with knob events"></ion-range>
+<ion-range aria-label="Range with knob events" dual-knobs="true"></ion-range>
 
 <script>
   const range = document.querySelector('ion-range');
+  range.value = {
+    lower: 20,
+    upper: 80,
+  };
 
   range.addEventListener('ionKnobMoveStart', ({ detail }) => {
-    console.log('ionKnobMoveStart:', detail.value);
+    console.log('ionKnobMoveStart:', detail.knob, detail.position, detail.value);
   });
 
   range.addEventListener('ionKnobMoveEnd', ({ detail }) => {
-    console.log('ionKnobMoveEnd:', detail.value);
+    console.log('ionKnobMoveEnd:', detail.knob, detail.position, detail.value);
   });
 </script>
 ```

static/usage/v9/range/ion-knob-move-event/react.md

@@ -6,8 +6,13 @@ function Example() {
   return (
     <IonRange
       aria-label="Range with knob events"
-      onIonKnobMoveStart={({ detail }) => console.log('ionKnobMoveStart:', detail.value)}
-      onIonKnobMoveEnd={({ detail }) => console.log('ionKnobMoveEnd:', detail.value)}
+      dualKnobs={true}
+      value={{
+        lower: 20,
+        upper: 80,
+      }}
+      onIonKnobMoveStart={({ detail }) => console.log('ionKnobMoveStart:', detail.knob, detail.position, detail.value)}
+      onIonKnobMoveEnd={({ detail }) => console.log('ionKnobMoveEnd:', detail.knob, detail.position, detail.value)}
     ></IonRange>
   );
 }

static/usage/v9/range/ion-knob-move-event/vue.md

@@ -2,6 +2,8 @@
 <template>
   <ion-range
     aria-label="Range with knob events"
+    :dual-knobs="true"
+    :value="{ lower: 20, upper: 80 }"
     @ionKnobMoveStart="onIonKnobMoveStart"
     @ionKnobMoveEnd="onIonKnobMoveEnd"
   ></ion-range>
@@ -11,11 +13,11 @@
   import { IonRange } from '@ionic/vue';
 
   const onIonKnobMoveStart = ({ detail }) => {
-    console.log('ionKnobMoveStart:', detail.value);
+    console.log('ionKnobMoveStart:', detail.knob, detail.position, detail.value);
   };
 
   const onIonKnobMoveEnd = ({ detail }) => {
-    console.log('ionKnobMoveEnd:', detail.value);
+    console.log('ionKnobMoveEnd:', detail.knob, detail.position, detail.value);
   };
 </script>
 ```