Ion-range's ion-input event does not fire

Ionic Framework Ionic Vue
1

Hi there,

The ion-input event of ion-range does not fire. Why? Is it a bug or am I missing something?

    <ion-range @ion-input="() => { console.log('some'); }"></ion-range>

Btw:

  • @ion-change get’s fired, but not @ion-input …
  • I was planing a two-way-binding to :value, but it’s only one-way at initializing state, so I thought to use the @ion-input event …
  • I am using @ionic/vue": “^7.0.10” …
  • Maybee someone could confirm that the event gets fired or not …
2

Hi there,

sorry, but …

Maybee someone could just try the ion-range component and tell me, if her or his ion-input event does fire or not, with his or her package used. I’m using the ionic/vue": “^7.0.10” package.

Thank you, if someone got the time for this easy question.

Greets

3

I am also suffering from this issue.

4

Yup, this appears to be a bug. There is an open issue here - bug: ionInput event in Ion-Range component doesn't trigger · Issue #27292 · ionic-team/ionic-framework · GitHub

There is some insight into the issue in the closed PR that didn’t get merged due to affecting IonChange - fix(vue): range emits ionInput by liamdebeasi · Pull Request #27294 · ionic-team/ionic-framework · GitHub

I just upgraded to Ionic 7 and missed in my testing that this isn’t working :frowning:

I created a reproduction here.

1 Like
5

Thank you for replying.

6

Here is an update from Liam. The Ionic team is actively working on a solution.

The root issue is caused by Ionic not having a way of synchronously updating the v-model ref. This results in a (hacky) workaround that has limitations. We’re trying to get a feature added to Vue that would make this easier to implement (see: vuejs/core#8652) but we are also looking at alternative implementation patterns in the meantime.