input type=”range”とtype=”number”を同期させる

前回の記事の「【JavaScript 】Web画面で色を指定してJavaScriptの変数に受け取る」の友人よりまた新たにお願いされたので今回も。

inputタグのrangeタイプとnumberタイプを同期させて入力でもスライダーでも数値指定できるようにして欲しいとのこと。わかった!やってみる!

 

サンプルコード

 

解説

※CSSはかなり適当なので参考にしないでください。

とても簡単に作りです。

関数をrangeとnumberの2種類分用意して、片方が変更されたらもう片方も変更するといった感じです。

とはいえ、流石に処理が多いので関数一つにまとめて、引数で操作するのも有かと思います。

変更したinputタグのidと、その対となるidを引数として渡すと処理してくれる関数ってやつです。

先程のコードだと、1色しか変更してないのに全色を変更する処理を挟んでるので無駄が多いです。ただ、初心者には分かり易いのと色のサンプルを呼び出す際に全色取得する必要があるのでその辺がシンプルに書けるのは最初のコードかなと思います。

 

今回のブログ曲

今回投稿中に聴いていた曲はこちら

カテゴリー: HTMLJavaScript

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です