JavaScript、スライダーに応じて要素を変化させる。

input type = "range"。

こんにちは、「ふ」です。
カラーピッカーなどで見かける、スライダーに合わせて要素の状態を変化させるやつ。ふと、実装してみたくなりました。

はじめに思ったのが、SVGなどでスライダー状に要素を配置し、touchmoveイベントなどで移動距離を測定→要素の変化率に割り当てる..結構大変な作業だ💧 〜となっていたところ。

便利なHTML要素があった。

スライダーをHTMLの部品として表示することができる、「input type = "range"」というものがあったんです←知らんかった！

表示させるには、inputタグを書くだけ⬇︎。

<input type = "range">

はい、できました。すばらしいですね！
実際に🔵の部分をつかんで、動かすことができます。

でもこれだけでは「ただの動かせるつまみ」です。
今回はJavaScriptを使ってrangeスライダーの値を取り出し、要素の状態を変化させるものを実装していきます。いろんな使い道がありそうだ。

rangeのプロパティ。

JavaScriptを使ってrangeの値を取り出せるように、先づはrangeがどのようなプロパティを持っているのか、知っておきましょう。

min/max。

<input type = "range" 「「１min」」 = "0" 「「１max」」 = "100">

rangeの最小値と最大値を設定します。初期値はmin:0、max:100です。

minとmaxを指定しただけでは、見た目は変わりません。でも、このプロパティはとても有効なものです。

もしmin/maxが0〜100で変更不可だったとします。すると例えば、「10〜20の範囲で変化させたい」などというときに、0〜100を10〜20にいちいち換算する作業が発生します。
自由に最大/最小を指定できることで、値をそのままパラメータに渡すことができるんです。記事の後半で実際に要素を変化させるサンプルを紹介しますが、そのときmin/maxプロパティが便利なことを実感することになります。

step。

<input type = "range" step = "1">

もう１つ、知っておきたいこと。
実は、rangeは画像の上に示すような連続変化ではなく、下にあるステップ（段階的な）変化が採用されています。

そのステップ１つあたりの大きさを決めるのが、stepプロパティです。

stepの反映結果は、先ほどのmin/max値の指定が関わってきます。
ちょっと試してみましょう。

<input type = "range" min = "0" max = "8" step = "2">

min-maxを0〜8とし、ステップ１つぶんの大きさを2に指定しました。

結果が⬆︎です。
実際に動かしてみてください。0〜8の範囲においてステップ１つぶんが「2」なので、４段階にthumbがステップすることになります。

rangeのデフォルト値ではmin:0、max100、step:1で、100分割という細かなものになってます。そのため一見、連続変化しているように体感するのですが、そうではありません。いまのようにstepをカスタマイズしてみると、段階的に変化していることがわかります。

ステップ変化が採用されているため、rangeは緻密な変化に対する使用には向いていない、と言われています。

value。

初期状態における、🔵の部分（thumbといいます）の位置を指定します。デフォルトではminとmaxの中央に位置するようになっているのですが、試しに変更してみましょう。

<input type = "range" value = "20">

minとmaxはデフォルトの0〜100のまま、valueを20としてみました。
初期表示のthumbの位置が左20%の位置になっています。

valueを検出。

それではJavaScriptを使って、rangeの値を抽出してみましょう。
rangeの値は「value」で取り出すことができます。

<input id = "range1" type = "range">

rangeにid名「range1」を指定し、JavaScriptで参照します。

const range1 = document.getElementById("range1");
console.log(range1.「「１value」」);
「「３▶︎ 50」」

valueのデフォルト値である「50」が出力されました。

これはあまり意味がありません。ユーザが手動でthumbを動かしたとき、それに応じたvalueを取得したい。

イベントリスナを使いましょう。
「thumbを動かす」というイベントは「input」を使います。

range1.addEventListener("「「１input」」",
    (e)=>console.log(e.target.value));
「「３▶︎ thumbを動かすたびにvalueが出力される」」

イベントリスナの引数「e」は、イベントそのもの。
event.targetで対象の要素が取得できます。その「value」をconsoleに表示するようにしました。

このようにすれば、thumbを移動させたときその都度、consoleにvalueが出力されるようになります。

JavaScriptの引数「e」とは？ 〜イベントオブジェクトについて。

〽️ イベントリスナのもう１つの働き。

要素の変化に反映させる。

リアルタイムでvalueが取り出せたところで、これを要素の変化へと落とし込んでいきましょう。

rangeの数値を表示。

web上にrangeの数値を表示させるサンプルです。

<div id = "area">
<p id = "num">50</p>
</div>

<input id = "range2" type = "range">

rangeの上部にテキスト領域を作り、初期値の「50」を表示させています。
JavaScriptでthumbの動きに合わせて、数値が変化するようにしましょう。

「「３//要素を取得」」
const num = document.getElementById("num");
const range2 = document.getElementById("range2");

「「３//現在のvalueをテキスト領域に表示」」
range2.addEventListener("input",function(e) {
    num.textContent = e.target.value;
})

ユーザがthumbを動かすと、numのtextContentがそのときのrange値に差し替えられるようにしました。
valueのデータ型はstring（文字列）なので、変換処理をせずにそのままtextContentに渡すことができます。

⬆︎thumbを動かすと、それに応じて数値が変化するようになりました。

rangeで回転。

<img id = "fu" src = "fu.svg">

今度は画像を回転させてみましょう。画像の下にrangeを追加します。

<input id = "range3" type = "range" 
「「１min = "-180" max = "180"」」>

回転には、transform:rotate(〇〇deg)を使用します。
左右に180°ずつ回転させるとちょうど１回転ぶんになるのですが、(〇〇deg)の部分にそのままrangeの値を渡せるようにしたい。なので、min/maxを初期値の「0〜100」ではなく、「-180〜180」としました。

JavaScriptを書いていきます。

「「３//要素を取得」」
const fu = document.getElementById("fu");
const range3 = document.getElementById("range3");
    
「「３//valueをrotateの角度に反映させる」」
range3.addEventListener("input",function(e) {
    fu.style.transform = `rotate(${e.target.value}deg)`;
})

できました！
とても単純なコードで実装できるのがうれしいですね。

JavaScriptがとても楽になる。

最後までお読みくださり、ありがとうございました。

input type = "range"という便利要素の存在を、「ふ」は今回はじめて知りました。minとmaxを自由に設定できるため、変化させたいパラメータに換算する手間も省けます。HTML側であらかじめ用意されているものなので、JavaScriptで何か処理をする際でも、ごく簡単なコードで実装が完了します。

何かの機会に使えそうなので、みなさんもぜひ試しておいてください。
ではまた〜 🎶