みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回はスライダーの値と画像サイズを連動させる方法について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- スライダーの値と画像サイズを連動させることができる
今回はHTMLの知識も少し必要だよ！
スライダーの値と画像サイズを連動させよう！
スライダーの値と画像サイズを連動させるためには以下の対応が必要となります。
- スライダーの表示
- スライダーのHTMLを取得
- スライダーにイベントリスナーを設定
- 受け取ったイベントの値を画像のサイズ(width)に設定
それぞれ解説するよ！
スライダーを表示する構文
<input type="range" id="任意のID" min="最小値" max="最大値" value="初期値" />
type=”range”
と設定すると、スライダーが表示されるよ！
と設定すると、スライダーが表示されるよ！
HTMLを取得する構文
document.getElementById("HTMLのID");これでHTMLとJavaScriptの連携ができるよ！
イベントリスナーを設定する構文
対象の要素.addEventListener("イベントの種類", 呼び出す関数);指定したイベントが行われると、指定した関数を呼び出すよ！
HTMLのサイズ(width)を上書きする構文
対象の要素.style.width = "サイズ"“100px”のなどの値を渡せるよ！
実際に動かしてみよう！
See the Pen
スライダーと画像のサイズを連動 by samehack (@samehack)
on CodePen.
これまでの知識を組み合わせて作ってみました。
setTimeoutでHTMLの取得を遅延実行しているのは
ブラウザの仕様によってHTMLの描画が間に合わないことがあるためです。
環境によっては不要です。
setTimeoutについて詳しく知りたい方はこちら！
【JavaScript】setTimeoutに0ミリ秒(引数なし)を渡す理由を解説！
samehack.com
スライダーの値と画像サイズを連動させられてえらい！
まとめ
- ■スライダーの表示
- ＜input type=”range” id=”任意のID” min=”最小値” max=”最大値” value=”初期値” /＞
- ■スライダーのHTMLを取得
- document.getElementById(“HTMLのID”);
- ■スライダーにイベントリスナーを設定
- 対象の要素.addEventListener(“イベントの種類”, 呼び出す関数);
- ■受け取ったイベントの値を画像のサイズ(width)に設定
- 対象の要素.style.width = “サイズ”
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
