JavaScript addEventListenerを使ってスライダー（range）の変更イベントを実装する

2023年2月10日

環境
Windows 10 Home 64bit
Google Chrome　109.0.5414.120

書式
1.スライダー要素を取得します。
let 変数名 =document.querySelector(`input[type=’range’][name=’属性名’]`);

2.スライダーの変更イベントの登録
変数名.addEventListener(`change`, function () {処理コード}
スライダーの値を取得
${変数名.value}

使用例

<!DOCTYPE html>
<html>
<body>

<p><input type="range" name="tt" min="10" max="100" step="5" value="30"></p>
<div id="res">値: 20</div>

<script>

// スライダー要素の値変更時に取得
let cft = document.querySelector(`input[type='range'][name='tt']`);

//　スライダー要素をドラッグして離した時
cft.addEventListener(`change`, function () {
    //
      document.querySelector(`#res`).innerHTML = `値: ${cft.value}`;
});

</script>

</body>
</html>

結果
スライダーのをドラッグして外した時に、スライダーの値をdiv要素「res」に表示します。

JavaScript

Posted by arkgame

関連記事: