<input type="range"> 数値を選ぶスライダーを作成する

HTMLの<input type="range">は、レンジ入力欄（数値を選べるスライダー）を設置するために使います。

🐢 <input type="range" name="speed" min="0" max="11"> 🐰

👆このようなHTMLを書くだけでスライダーを表示してくれます。

このページの目次

• type="range"の注意点
  • 表示はブラウザごとに異なる
  • ざっくりとした数値の選択時に使おう
• type="range"の使い方
  • min、max、stepの3つの属性をおさえよう
  • value属性で初期値を設定する
• JavaScriptでスライダーの値を表示する ==中級者向け==
  • inputの現在の値を取得する方法
  • 現在の値を表示する方法
• CSSでスライダーのデザインを変更する
  • スタイル後のイメージ
  • 追加するCSS

type="range"の注意点

表示はブラウザごとに異なる

ざっくりとした数値の選択時に使おう

<input type="range">は、何かの「大きさ」や「速さ」の調整など（たとえば音量やフォントサイズの調整）、ユーザーにざっくりとした数値を選んでもらうときに使いましょう。
間違えられると困るような厳密な数値を入力してもらいたいときはtype="number"の使用を検討するのが良いでしょう。

関連するページを読む

<input type="number">の使い方

type="range"の使い方

「そもそもinputタグって何？」という方は、事前に次のページをチェックするのがおすすめです。

関連するページを読む

inputタグ・コンプリートガイド - HTML

min、max、stepの3つの属性をおさえよう

スライダーで選択できる数値の範囲や、変化のステップの大きさは以下の属性で決めます。

たとえば、次のようにした場合...

HTML

<input type="range" min="0" max="100" step="10">

👆最小値minが0、最大値maxが100なので 0〜100の範囲のスライダーになり、10単位で数値を変更できます。言い換えると0 10 20 30...100だけに「つまみ」が止まるスライダーになります。

minとmaxの値はstepの倍数にすること

たとえばstep="10"とした場合、max="13"とすることはできません。10ずつ動くスライダーのつまみが13に止まることはないからです。minとmaxの値はstep="10"の倍数になるようにしましょう。

value属性で初期値を設定する

スライダーの初期値（つまみが最初どこに止まっているか）は、value属性により指定できます。

<!-- 1〜5を選ぶスライダー-->
<input type="range" name="example" min="1" max="5" step="1" value="5">

👆たとえば1〜5の範囲を選べるスライダーがあるとします。この<input type="range">にvalue="5"（5はスライダーの最大値）を指定した場合、つまみはいちばん右に寄って表示されます。

JavaScriptでスライダーの値を表示する 中級者向け

スライダーを動かしたときに現在の値をリアルタイムで表示したい場合には、JavaScriptを使う必要があります。

inputの現在の値を取得する方法

<input type="range">の値を取得する方法は、他の種類のinput要素と同じです。

HTML

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

👆このようにid="example"を持つ<input>の値は…

// まずinput要素を取得
const inputElem = document.getElementById('example');
// 現在の値を出力
console.log(inputElem.value);

👆このように取得できます。input要素.valueで取得できるわけですね。

現在の値を表示する方法

まず、実際に動作するサンプルコードの完成形を載せておきます。よかったらつまみを動かしてみてください👇

サンプルコードの紹介

HTML

<input type="range" id="example" min="1" max="10" step="1">

<p>現在の値は<span id="current-value"></span>です</p>

👆今回例として使うHTMLです。<span id="current-value"></span>の中にスライダーの現在値を入れようと思います。

JavaScript

const inputElem = document.getElementById('example'); // input要素
const currentValueElem = document.getElementById('current-value'); // 埋め込む先のspan要素

// 現在の値をspanに埋め込む関数
const setCurrentValue = (val) => {
  currentValueElem.innerText = val;
}

// inputイベント時に値をセットする関数
const rangeOnChange = (e) =>{
  setCurrentValue(e.target.value);
}

window.onload = () => {
  inputElem.addEventListener('input', rangeOnChange); // スライダー変化時にイベントを発火
  setCurrentValue(inputElem.value); // ページ読み込み時に値をセット
}

👆JavaScriptは例えばこのようにします（あくまで一例です）。以下で簡単に解説します。

解説1：スライダーの値が変更されたときにイベントを発火

inputElem.addEventListener('input', rangeOnChange);

👆スライダーが操作された時にすぐ処理を行うためには、addEventListener('input', ~)を使う必要があります。'change'だとスライダー操作が止まるまで（ユーザーが指を離すまで）イベントが発火されません。

const rangeOnChange = (event) =>{
  // スライダーの値は event.target.value
}

👆inputイベントで呼び出された関数ではevent.target.valueという形でリアルタイムのスライダーの値を取得できます。あとはこの関数の中で「HTMLに値を埋め込む」処理を行えばOKです。

inputElem.removeEventListener('input', rangeOnChange);

解説2：HTMLに値を埋め込む

<span id="current-value"></span>の中に取得した値を埋め込むためには、以下のようにすればOKです。

const currentValueElem = document.getElementById('current-value'); // span要素を取得
currentValueElem.innerText = 埋め込みたいもの;

👆◯◯.innerTextにより要素内にテキストを入れることができます。埋め込みたいものの部分に、さきほどのevent.target.valueを入れれば良いわけですね。

解説3：ページ読み込み時にも値を埋め込む

これだけだとスライダーが動かされるまでは値がページ上に表示されません。以下のようにして、ページ読み込み時にもスライダーの値を埋め込むようにします。

window.onload = () => {
  setCurrentValue(inputElem.value); // inputElem.valueはスライダーの値
}

以上のようなJavaScriptにより<input type="range">の現在値の表示が実現できます。

CSSでスライダーのデザインを変更する

ここからはCSSでスライダーのデザインを変える方法を紹介します。丸いつまみの部分と横に伸びるバーの部分それぞれに対してスタイルをあてていくことになります。

スタイル後のイメージ

<input type="range" name="speed" min="0" max="10">

/* リセットCSS：すでに指定済みなら不要 */
* {
  box-sizing: border-box;
}
/* 以下スライダーのCSS */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  background: #8acdff;
  height: 14px;
  width: 100%;
  border-radius: 10px;
  border: solid 3px #dff1ff;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #53aeff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
}
input[type="range"]::-moz-range-thumb {
  background: #53aeff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
  border: none;
}
input[type="range"]::-moz-focus-outer {
  border: 0;
}
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
}

追加するCSS

以下のCSSにより<input type="range">のデザインを変更できます。

input[type="range"] {
  -webkit-appearance: none; /* 🚩これ無しだとスタイルがほぼ全く反映されないので注意 */
  appearance: none;
  cursor: pointer; /* カーソルを分かりやすく */
  outline: none; /* スライダーのアウトラインは見た目がキツイので消す */
  height: 14px; /* バーの高さ */
  width: 100%; /* バーの幅 */
  background: #8acdff; /* バーの背景色 */
  border-radius: 10px; /* バーの両端の丸み */
  border: solid 3px #dff1ff; /* バー周囲の線 */
}
/* WebKit向けのつまみ */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /*  🚩デフォルトのつまみのスタイルを解除 */
  background: #53aeff; /* 背景色 */
  width: 24px; /* 幅 */
  height: 24px; /* 高さ */
  border-radius: 50%; /* 円形に */
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
}
/* Moz向けのつまみ */
input[type="range"]::-moz-range-thumb {
  background: #53aeff; /* 背景色 */
  width: 24px; /* 幅 */
  height: 24px; /* 高さ */
  border-radius: 50%; /* 円形に */
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
  border: none; /* デフォルトの線を消す */
}
/* Firefoxで点線が周りに表示されてしまう問題の解消 */
input[type="range"]::-moz-focus-outer {
  border: 0;
}
/* つまみをドラッグしているときのスタイル */
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
}

👆各プロパティの役割をコメントで説明しています。🚩は重要なポイントになります。ご覧の通り、WebKit系とMoz系でスライダーの各パーツを表すセレクターが異なります。

SCSSバージョン

👆SCSSバージョンのサンプルコードはCodePenで見ることができます。大きさや色など自由にカスタマイズしてご利用ください。