Ionic ion-range events all Custom-Events?

Hey there,
I use ionic (@ionic/angular 4.11.10) in a bigger project and there is some strange Event-Thing going on on the “ion-range”.

I started a new blank projekt (ionic starter tabs) and there is the same thing going on. I am not sure if it is just normal now, or if it is some kind of a bug.

I like to use that ion-range in combination with an audio-player and the user should use it as a seekbar. So far so good.

No matter which event I use. I always get back a “CustomEvent”.

Template:
<ion-range (ionChange)="change($event)"></ion-range>

and ts-file:
change(value) {
console.log(value);
}

and log shows:

1. CustomEvent {isTrusted: false, detail: {…}, type: "ionChange", target: ion-range.md.hydrated.range-pressed, currentTarget: ion-range.md.hydrated.range-pressed, …}

  1. isTrusted: false
  2. detail: {value: 66}
  3. type: "ionChange"
  4. target: ion-range.md.hydrated
  5. currentTarget: null
  6. eventPhase: 0
  7. bubbles: true
  8. cancelable: true
  9. defaultPrevented: false
  10. composed: true
  11. timeStamp: 9909.179999958724
  12. srcElement: ion-range.md.hydrated
  13. returnValue: true
  14. cancelBubble: false
  15. path: (21) [ion-range.md.hydrated, slot, main.inner-scroll.scroll-y, document-fragment, ion-content.md.hydrated, app-tab2.ion-page, slot, document-fragment, ion-router-outlet.hydrated, div.tabs-inner, ion-tabs, app-tabs.ion-page, slot, document-fragment, ion-router-outlet.hydrated, ion-app.md.ion-page.hydrated, app-root, body, html.plt-desktop.md.hydrated, document, Window]
  16. __proto__: CustomEvent

So can anybody tell me if that is normal? In older versions there have been much more options, like “_isFocus” and stuff.

The thing is when I ise the ionBlur or ionFocus event i do not get the value the user clicked on because details is just empty with no value.

The old event looks like this one here:

1. Range {_config: Config, _elementRef: ElementRef, _renderer: RendererAdapter, _componentName: "range", _mode: "md", …}

  1. min: (...)
  2. max: (...)
  3. step: (...)
  4. snaps: (...)
  5. pin: (...)
  6. debounce: (...)
  7. dualKnobs: (...)
  8. ratio: (...)
  9. ratioUpper: (...)
  10. disabled: (...)
  11. value: (...)
  12. color: (...)
  13. mode: (...)
  14. _config: Config {_c: {…}, _s: {…}, _modes: {…}, _trns: {…}, plt: Platform}
  15. _elementRef: ElementRef {nativeElement: ion-range.range.range-md.range-md-white.ng-valid.ng-dirty.ng-touched}
  16. _renderer: RendererAdapter {delegate: DebugRenderer2}
  17. _componentName: "range"
  18. _mode: "md"
  19. _defaultValue: 0
  20. _form: Form {_focused: null, _ids: 35, _inputs: Array(1)}
  21. _item: Item {_config: Config, _elementRef: ElementRef, _renderer: RendererAdapter, _componentName: "item", _mode: "md", …}
  22. _ngControl: null
  23. _isFocus: false
  24. _disabled: false
  25. _debouncer: TimeoutDebouncer {wait: 0, timer: null, callback: ƒ}
  26. _init: true
  27. _initModel: true
  28. ionFocus: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
  29. ionChange: EventEmitter {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
  30. ionBlur: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
  31. _value: 26
  32. id: "range-15-0"
  33. _labelId: "lbl-15"
  34. _haptic: Haptic {_p: undefined}
  35. _plt: Platform {_versions: {…}, _qp: QueryParams, _bbActions: Array(1), _pW: 0, _pH: 0, …}
  36. _dom: DomController {plt: Platform, r: Array(0), w: Array(0), q: false}
  37. _cd: ViewRef_ {_view: {…}, _viewContainerRef: null, _appRef: null}
  38. _min: 0
  39. _max: 93
  40. _step: 1
  41. _valA: 26
  42. _valB: 0
  43. _ratioA: 0.27956989247311825
  44. _ratioB: 0
  45. _events: UIEventManager {plt: Platform, evts: Array(1)}
  46. _slider: ElementRef {nativeElement: div.range-slider}
  47. _color: "white"
  48. _barL: ""
  49. _barR: "72.04301075268818%"
  50. _onChanged: ƒ (newValue)
  51. _onTouched: ƒ ()
  52. _rect: DOMRect {x: 95.234375, y: 391.234375, width: 243, height: 42, top: 391.234375, …}
  53. _activeB: undefined
  54. _pressed: false
  55. _pressedA: false
  56. _pressedB: false
  57. __proto__: BaseInput

Is that a bug or now just normal? Thanks for the help so far. :slight_smile: