アウトプットするブログ

ブログの投稿ログ

2021年

9月

8月

7月

6月

hoge

今回はtype="range"属性をしようしてgifのようなスライダーを作成してみました！

html

<label for="volume">Volume: </label>
// minとmaxをしようしたスライドバーを作成
<input type="range" id="volume" name="volume" min="0" max="20">

<label for="result">Your choice: </label>
// スライドバーと同値を出力する
<input type="number" id="result" name="result">

js

// volume要素を取得
const volume = document.getElementById('volume');
// スライドバー要素を取得
const result = document.getElementById('result');
// volumeの値へスライドバーの値を代入する
result.value = volume.value;

volume.addEventListener('change', () => {
    // 変更時もvolumeの値へスライドバーの値を代入する
  result.value = volume.value;
});

まとめ

tree.jsなどを使用したサイト内でユーザーが何かを操作する時などに使えそうだなぁと思い、メモがてら書いておきます！