Custom Elements: INPUT and Range

Connect INPUTs for text entry and range slider

by dannye

HTML

<h2>Custom Element : Connected INPUT and Range slider</h2>
Please enter a number between 20 and 50, or use the range slider
<p>
  <number-and-range></number-and-range>
</p>

CSS

body {
  background: gold;
  font-family: arial;
}

p {
  zoom: 2;
}

JavaScript

customElements.define('number-and-range', class extends HTMLElement {
  get value() {
    return this.input[0].value;
  }

  set value(val) {
    this.input[0].value = val;
  }
  connectedCallback() {
    this.input = ['number', 'range'] //create [0] and [1] values in array
      .map((type, idx) => Object.assign(
        this.appendChild(document.createElement('input')), {
          type,
          min: 20,
          max: 50,
          oninput: _ => this.value = this.input[~~!idx].value = this.input[idx].value //toggle [0] and [1]
        }));
    this.value = 42;
    console.log('value', this.value);
  }
});

let el=document.querySelector('number-and-range');
console.log(el.value);
el.value=99;