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

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

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

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

type="range"の注意点

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

ブラウザごとのrangeスライダーの表示イメージ

<input type="range">はすべての主要ブラウザで使用できますが、ブラウザによってスライダーの見た目が異なることに注意しましょう。CSSでデザインを変える方法はこのページの後半で解説します。

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

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

type="range"の使い方

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

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

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

  • min="数値":選択できる最小値
  • max="数値":選択できる最大値
  • step="数値":数値の変化の単位

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

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に止まることはないからです。minmaxの値は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を使う必要があります。

ReactやVue、AngularなどのJavaScriptはフレームワークを使っている場合は、レンジスライダー用のコンポーネントをnpmで探して使うのが楽だと思います。

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で取得できるわけですね。

現在の値を表示する方法

続いて、取得した値をWebページ内に表示(HTMLに埋め込み)してみましょう。

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

サンプルコードの紹介

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です。

🤔
SPAならremoveEventListenerも忘れずに!

SPA(シングル・ページ・アプリケーション)でaddEventListenerを使うときは注意が必要です。アプリ内でページ遷移をしたことで要素が消えたにも関わらず、イベントだけが残ってしまう可能性があるからです。

これを防ぐため、SPAでは要素が消えるタイミングでイベントを解除しましょう。

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を入れれば良いわけですね。

😺サンプルコードでは、この部分の処理をsetCurrentValueという関数にまとめています。

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

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

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

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

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

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

スタイル後のイメージ

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

追加する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で見ることができます。大きさや色など自由にカスタマイズしてご利用ください。

ブラウザ対応状況

主要ブラウザ全てで使用できます 🎉

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    4〜
  • Safariのアイコン
    Safari
    3.1〜
  • Firefoxのアイコン
    Firefox
    23〜
  • Edgeのアイコン
    Edge
    12〜
  • IEのアイコン
    IE
    10〜

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    108〜
  • iOS Safariのアイコン
    iOS Safari
    5〜

caniuse.comで詳しく見る