問題
3inputの応用
input type="range" は、スライダー形式で数値を入力できるHTML要素です。
値はjQueryの .val() で取得でき、.css() と組み合わせることで要素のサイズをリアルタイムに変更できます。
ユーザー操作に応じて画面を動的に変化させる処理は、jQueryを使ったUI実装の基本です。実際に手を動かしながら理解していきましょう。
jQueryの問題に挑戦しよう！
問題
「inputの応用」
jQueryのinput rangeでスライダーを使い要素のwidth・heightをリアルタイムに変更する方法を解説。val()・css()・changeイベントの使い方を無料で学べます。
あらかじめエディタに書くコード
<p>横幅</p>
<input type="range" id="width">
<p>縦幅</p>
<input type="range" id="height">
<div class="box"></div>
¥HTML¥
.box{
background-color: #dddddd;
}
¥CSS¥
期待する画面
解答と解説（inputの応用）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
input type="range" の値はjQueryの .val() で取得できます。取得した値は文字列として扱われるため、そのままではCSSのサイズとして使えません。今回は末尾に "px" を文字列として連結することで、CSSのwidthやheightに渡せる形式に変換しています。
$("input").change() は、inputの値が変わったタイミングで発火するイベントです。スライダーを動かすたびにこのイベントが実行され、その都度 .val() で最新の値を取得します。
取得したwidthとheightの値は .css() メソッドでまとめて適用しています。.css() はオブジェクト形式で複数のプロパティを同時に指定できるため、widthとheightを1回の処理で更新できます。これによりスライダーを動かすたびに .box の横幅・縦幅がリアルタイムで変化します。
補足
input type="range" は min・max 属性で最小値・最大値の設定も可能です。
また .change() の代わりに .on("input") を使うと、ドラッグ中もリアルタイムで反映されます。
用途に応じて使い分けましょう。
同じ val() や css() を使う問題も合わせて挑戦してみよう！
・問題2：一文字ずつ表示されるアニメーション（前の問題）
・問題4：jQueryでアニメーションを作ろう（次の問題）
・問題7：onイベントについて（changeと関連するイベント）
・問題10：jQueryでボタンを作ろう1（css()を使う問題）
jQueryの基礎から学びたい方はjQuery入門講座もチェック！
ポイント
input rangeとは
input type="range" はスライダー形式で数値を入力できる要素です。
直感的に値を調整できるため、jQueryと組み合わせたUI操作によく使われます。
val()・css()の役割
.val() でinputの値を取得できます。
取得した値は文字列として扱われるため、CSSで使う場合は "px" などの単位を付ける必要があります。
.css() は要素のスタイルを変更するメソッドです。
オブジェクト形式で複数のプロパティをまとめて指定でき、width と height を同時に変更できます。
