Stop firing onChange when move with marker on color-area and hue-slider?

[dienstbereit]

Hi,

is it possible to fire the onChange function only after the move has been completed (on mouseup/touchend/keyup)?

[mdbassit]

the onChange callback fires every time the color is updated, so it's not possible to only fire it on mouseup/touchend/keyup.
However, it is possible to listen for a change event on your input field that fires when the color picker is closed and the color has changed. Here is an example:

const input = document.querySelector('input.my-color');

input.addEventListener('change', e => {
  console.log(input.value); // or console.log(e.target.value);
});

[dienstbereit]

Thank you mdbassit for your quick reply!

Unfortunately, your approach is not an option for me. Your solution from this discussion works perfectly for me.

There is only one problem. The addEventListener fires twice.
element.addEventListener("mouseup", (event) => { setTimerUrl() });

I have tried to solve the problem in this way:
element.addEventListener("mouseup", (event) => { event.stopPropagation() setTimerUrl() });

This only triggers the addEventListener once, but unfortunately event.stopPropagation() causes the cursor to no longer move away from the marker. Do you have a solution for this?

[mdbassit]

Could you provide a page where I can test this?