fix(range): emit ionInput when value changes

[thetaPC]

Issue number: resolves #29619

---

What is the current behavior?

The ionInput emits for range even when the value hasn't changed. This does not match our documentation. It should only emit when the value changes (and continuously while the user is dragging the knob).

What is the new behavior?

• Moved the emitter to the value watch function, to determine if the value has changed.
• Added a test

Does this introduce a breaking change?

• Yes
• No

Other information

How to test:

1. Navigate to the range basic HTML file
2. Add the following script

const ionicRanges = document.querySelectorAll('ion-range');

ionicRanges.forEach(range => {  
  range.addEventListener('ionInput', function(ev) {
    console.log('ionInput', ev.currentTarget.value);
  });
});

3. Navigate to the range test page
4. Open the console
5. Move the single knob range (let go when you're done)
6. Verify that the value is shown in the console
7. Tap as close to the middle of the knob. The goal is to tap it without the value moving.
8. Verify that the value does not show in the console

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 24, 2025 8:55pm

[ShaneK]

Generally looks good, I left one comment but it's probably just a nit. Nice work 🚀

[brandyscarney]

Non-blocking suggestion but otherwise looks good! 🎉