Javascript custom element's oninput function issue

class OninputClassDemo extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({
      mode: 'open'
    });

    this.parent = document.createElement('div');

    this.slider = document.createElement('input');
    this.slider.setAttribute('type', 'range');
    this.slider.setAttribute('min', '0');
    this.slider.setAttribute('max', '99');
    this.slider.setAttribute('value', '0')

    this.text = document.createElement('input');
    this.text.setAttribute('type', 'text');
    this.text.setAttribute('value', '');

    this.parent.appendChild(this.slider);
    this.parent.appendChild(this.text);
    shadow.appendChild(this.parent);

    this.slider.addEventListener('input', (event) => this.changeValue());

  }

  changeValue() {
    this.text.value = this.slider.value;
  }
}

window.customElements.define('demo-element', OninputClassDemo);

<demo-element></demo-element>