diff --git a/docs/api/range.mdx b/docs/api/range.mdx index 34353f615b..12dc94a8ad 100644 --- a/docs/api/range.mdx +++ b/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 */} diff --git a/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md b/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md index aa044d03b6..0eecfd9817 100644 --- a/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md +++ b/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md @@ -1,6 +1,8 @@ ```html diff --git a/static/usage/v9/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v9/range/ion-knob-move-event/angular/example_component_ts.md index a59cac3ba1..13996fd1e1 100644 --- a/static/usage/v9/range/ion-knob-move-event/angular/example_component_ts.md +++ b/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); } } ``` diff --git a/static/usage/v9/range/ion-knob-move-event/demo.html b/static/usage/v9/range/ion-knob-move-event/demo.html index 70e96b25da..c0afe41394 100644 --- a/static/usage/v9/range/ion-knob-move-event/demo.html +++ b/static/usage/v9/range/ion-knob-move-event/demo.html @@ -21,20 +21,24 @@
- +
diff --git a/static/usage/v9/range/ion-knob-move-event/javascript.md b/static/usage/v9/range/ion-knob-move-event/javascript.md index 5f7389814b..1b2af25af5 100644 --- a/static/usage/v9/range/ion-knob-move-event/javascript.md +++ b/static/usage/v9/range/ion-knob-move-event/javascript.md @@ -1,15 +1,19 @@ ```html - + ``` diff --git a/static/usage/v9/range/ion-knob-move-event/react.md b/static/usage/v9/range/ion-knob-move-event/react.md index 7085cc5c3b..123d6eb21a 100644 --- a/static/usage/v9/range/ion-knob-move-event/react.md +++ b/static/usage/v9/range/ion-knob-move-event/react.md @@ -6,8 +6,13 @@ function Example() { return ( 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)} > ); } diff --git a/static/usage/v9/range/ion-knob-move-event/vue.md b/static/usage/v9/range/ion-knob-move-event/vue.md index 6c74d47b80..d1367cfa20 100644 --- a/static/usage/v9/range/ion-knob-move-event/vue.md +++ b/static/usage/v9/range/ion-knob-move-event/vue.md @@ -2,6 +2,8 @@