素のJavaScriptでスライダーの値を表示する方法

こんにちは、コンスキです。

次のコードを見てください。

<input type="range">

このように書けば次のようなスライダーを作る事ができます。

このスライダーの現在の値が何なのか表示したいときってありますよね。

今回は、それを実現する方法をご紹介します。

ライブラリを使わずに、素のJavaScriptだけでできるのでぜひ活用してみてください！

完成形
コード
- HTMLの中でscriptタグを使いたくない場合
おわりに

完成形

完成形はこんな感じに動作します。

スライダーを動かすと値が即変わるようになっています。

コード

素のJavaScriptで作ると言いましたが、JavaScriptファイルさえ必要ありません。

HTMLファイル１つできます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>スライダーの値を表示</title>
    <link rel="stylesheet" type="text/cdisplayVale(this.value)" href="style.css">
</head>
<body>
  <h2 id="slider-value">50</h2>
  <input type="range" id="range-slider" onmousemove="displayVale(this.value)" onchange="displayVale(this.value)">
  <script type="text/javascript">
    
    function displayVale(value) {
      document.getElementById("slider-value").innerHTML = value;
    }
  </script>
</body>
</html>

HTMLの中でscriptタグを使いたくない場合

HTMLファイルにJavaScriptを書くのが嫌な場合は、分けて書いても大丈夫です。

その場合は、JavaScriptファイルを作ってください。

その後、HTMLファイルのなかにあるscriptタグの中身（11-16行）をそのJavaScriptファイルに書いてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>スライダーの値を表示</title>
  <link rel="stylesheet" type="text/cdisplayVale(this.value)ss" href="style.css">
</head>
<body>
  <h2 id="slider-value">50</h2>
  <input type="range" id="range-slider" onmousemove="displayVale(this.value)" onchange="displayVale(this.value)">
  <script src="main.js"></script>
</body>
</html>

function displayVale(value) {
  document.getElementById("slider-value").innerHTML = value;
}

おわりに

今回紹介したものは、スライダーを動かすとそれに合わせて表示がすぐに変わりますよね。

そのように、値を変更させたらそれに合わせてすぐに表示が変化することを「リアクティブ」といいます。

実はVue.jsなどのフレームワークを使わなくても、リアクティブ（即時的）な動作を再現することができます。

ただ、もしVue.jsに興味があれば次の記事を読んでみてください。