I am creating a simple volume changer for my website and I am using change event to trigger the setVolume function but it is triggered only when I release my mouse, how to make the event triggered before I release my mouse?
for example, when I swipe to the half the volume is changed to 0.5 before I need to release my mouse.
HTML :
<input type="range" min="0" max="100" value="100" class="slider" id="volume_slider" onchange="setVolume(this)">
Try input instead.
let range = document.querySelector("[type='range']");
range.addEventListener("input",function(){
console.log(this.value)
});<input type="range" min="0" max="100" value="100" class="slider" id="volume_slider">MDN says there is the change and the input event.
Change is triggered, when it is commited, i guess mouseup
The other one is triggered when the value changes
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
Note: The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.