HTML slider sticks to the cursor inside CodeMirror 6 decoration

Question

It looks like, that the element of CodeMirror 6 block the native events of mouseup event.

Once I click on a slider, it will never leave it. I cannot interact with anything

This slider is just a decoration inside the CodeMirror

The effect can be replicated here

CodeSandbox

if you click many times, it sticks to a slider and will never leave

In principle I can manually add eventListeners to a Dom element, but I have not idea how to pass it to the default browser events standing for the range operations.

Answer 1

I found the roots. You should turn off the option of CM6 widget not to ignore events.

i.e.

class FEWidget extends WidgetType {
  constructor(name, ref) {
    super();
    this.ref = ref;
    this.name = name;
  }
  eq(other) {
    return this.name === other.name;
  }
  toDOM() {
    let elt = document.createElement("div");
    elt.innerText = 'Hi!'

    return elt;
  }
  ignoreEvent() {
    return true; //this LINE
  }
  destroy() {
  }
}