HTMLだけでinputのrangeの横にnumber入力欄を作る

今までやっていたこと

JavaScriptを使ってinputのchangeイベントなどを使い変更時にnumberの値を変更していた

HTML

<input type="range" id="range">
<input type="number" id="number">

JavaScript

const range = document.getElementById('range');
const number = document.getElementById('number');

range.addEventListener('change', event => {
  number.value = range.value;
})

number.addEventListener('change', event => {
  range.value = number.value;
})

これからは

formの中身で同期させる
こんな事ができるなんて知らなかった

HTML

<form>
  <input type="range" name="range" min="0" max="100" value="0" oninput="this.form.input.value=this.value">
  <input type="number" name="input" min="0" max="100" value="0" oninput="this.form.range.value=this.value">
</form>

最後に

初投稿です！
文が全体的に短くなってしまいました
すみません