【JavaScript】値が反映されるスライダーを作る

こんにちは、ふみです。みなさんは Web上に値を変更するスライダーを実装したいと思ったことはありますか？
私は先日、スライダーを実装した入力フォームを作成する機会がありました。
そこで、今回は HTML + CSS + JavaScript を使ってスライダーを作成する方法について紹介します。

CONTENTS

1 スライダーを作る
- 1.1 サンプルコード
- 1.2 解説
2 スライダーの値を表示に反映させる
- 2.1 サンプルコード
- 2.2 解説
3 値を調整するボタンを追加する
- 3.1 サンプルコード
- 3.2 解説
4 まとめ

スライダーを作る

ブラウザに値を変更するスライダーを表示させるには HTML を使います。コードは次のとおりです。

サンプルコード

<!-- HTML -->
<input type="range" id="slider01" min="0" max="100" step="1" value="50" style="width: 240px;">

上記のコードを Windows 10 のアクセサリから開いたメモ帳へコピー＆ペースト後、「ファイルの種類(T):」を「すべてのファイル」に設定し、適当なファイル名に拡張子「.html」をつけてデスクトップ等に保存すると、すぐに動作確認できます。
完成したスライダーは次のように表示されます。

解説

この方法で作成したスライダーのデザインはブラウザによって見え方が異なります。

スライダーの幅は width の値で調整できます。
なお、スライダーの設定値は次のとおりです。

min: 最小値
max: 最大値
step: 増減分（省略時は1）
value: 初期値

スライダーの値を表示に反映させる

スライダーの値を表示に反映させるには JavaScript を使います。
HTML + JavaScript のコードは次のとおりです。

サンプルコード

<!-- HTML -->
<div>
  <input type="range" id="slider02" min="0" max="100" step="1" value="50" style="width: 240px;" oninput="display_value_slider02();">
  <span id="display02"></span>
</div>


<!-- JavaScript -->
<script type="text/javascript">
  window.onload = display_value_slider02();
  function display_value_slider02() {
    document.getElementById('display02').innerHTML = document.getElementById('slider02').value;
  }
</script>

スライダーを動かす毎に右の数値が反映されます。

解説

スライダーの値を反映するは HTML のスライダーの記述の後に JavaScript を記述します。
これでページ読み込み時は「window.onload ~」によって HTML のスライダーを読み込んだ後にスライダーの値の反映する function が実行されます。
しかし、記述の順番を逆にすると HTML のスライダーを読み込む前に JavaScript が動作するので、スライダーが見つからずにエラーが発生します。
HTML と JavaScript の記述の順番には注意しましょう。

また、スライダー操作時は inputタグの「oninput ~」によって1メモリ毎に JavaScript を実行していますが、この記述を「onchange ~」に変更するとスライダー操作後に JavaScript を実行するようになります。
onchange で設定したスライダーは次のとおりです。

スライダーを動かした後に右の数値が反映されます。

値を調整するボタンを追加する

値を調整するボタンを追加するにはボタンに JavaScript の function を設定しますが、ボタンの三角のデザインは CSS を使います。
CSS + HTML + JavaScript のコードは次のとおりです。

サンプルコード

<!-- CSS -->
<style>
  .leftward, .rightward {
    border-top: 7px solid #000000;
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid transparent;
    display: inline-block;
  }
  .leftward {
    transform: translate(-30%, 0%) rotate(90deg);
  }
  .rightward {
    transform: translate(30%, 0%) rotate(-90deg);
  }
</style>

<!-- HTML -->
<div>
  <button type="button" onclick="decrease();"><span class="leftward"></span></button>
  <input type="range" id="slider03" min="0" max="100" step="1" value="50" style="width: 240px;" oninput="display_value_slider03();">
  <button type="button" onclick="increase();"><span class="rightward"></span></button>
  <span id="display03"></span>
</div>

<!--JavaScript-->
<script type="text/javascript">
  window.onload = display_value_slider03();
  function display_value_slider03() {
    document.getElementById('display03').innerHTML = document.getElementById('slider03').value;
  }
  function decrease() {
    document.getElementById('slider03').value = Number(document.getElementById('slider03').value) - 1; //スライダーのstep値と同じ値にする
    display_value_slider03();
  }
  function increase() {
    document.getElementById('slider03').value = Number(document.getElementById('slider03').value) + 1; //スライダーのstep値と同じ値にする
    display_value_slider03();
  }
</script>

スライダーの左右のボタンをクリックすると数値を微調整できます。

解説

ボタンクリック時は document.getElementById メソッドでスライダーの値を文字列型の数字で取得します。このまま「+」すると、初期値の「50」に「1」が加えられて「501」になってしまうので、取得した値を計算するには Number関数で数値型に変換する必要があります。
また、スライダーの step の値を1以外に設定する場合は各function の増減値も同じ値に設定する必要があります。

ボタンのデザインは CSS を使って buttonタグ直下の階層の spanタグに反映させていますが、「<」、「>」の文字で問題なければ CSS を使わずに作成できます。