JS input type="range"のスライダーで値が確定したタイミングで値を取得したい

Question

##困っている点
JSの処理でaddEventListenerを使って値の変化を検知し、値が変更されれば、非同期でDBに格納されている値を更新しに行く、というような処理を行っています。（※ページ下部コード参照）

しかし、rangeのような、バー内をドラッグすることで値を変化させるinput要素だと、
例えば、メモリを5から10に変更する際に、addEventListenerを使うと,

5→6、6→7、7→8、8→9、9→10と1メモリごとに変化を検知していまい、
都度DBに変更をかけに行ってしまうため処理が重くなってしまいます。

---

input type="range"のバー↓

解決したいこと

rangeのメモリで変更したあとの最終の値のみを取得し、DBに送るようにしたいです。
わかる方いらっしゃいましたら、ご教授のほどよろしくお願いいたします。

コード

<input id="range" type="range" name="speed" min="0" max="11">

  var elem = document.getElementById('range');
  elem.addEventListener('input', (event) => {
    console.log(elem.value);
    //このあとDBに値を送信
  });

Answer 1

elem.addEventListener('input', (event) => {

'input' を 'change' に変更しましょう。