I have developed a basic app that logs the input range value to the console when the range input changes. Interestingly, it works flawlessly when I slide the slider left and right with my cursor. However, when I programmatically change the value using JavaScript, the slider's value updates but the console.log function does not trigger, resulting in no log appearing in the console.
// Changing input range value using JavaScript
const slider = document.getElementById('slider')
slider.value=4 // The position of the input range button has moved
// When manually changing the value with the mouse cursor, the console.log successfully logs the data value
// However, when doing it programmatically with JavaScript, it fails to log the data
<div x-data="{data: 3}">
<input type="range" id="slider" name="slider" min="1" max="5" x-model="data" @change="console.log(data)">
</div>