Web Design Leaves

レンジスライダーの構造

レンジスライダーは Track と Thumb と呼ばれる２つのコンポーネントで構成されています。

これらのコンポーネントにスタイルを適用してレンジスライダーをカスタマイズすることができます。

開発者ツールで確認してみる

開発者ツールで確認してみると input 要素のみが表示され、Track と Thumb の要素は表示されません。

これは、レンジスライダーが Web コンポーネントとして実装されているためで、ブラウザーはシャドウ DOM 内のレンジスライダーを構成する要素とスタイルを内部的にカプセル化して非表示にしています。

Chrome を使用している場合であれば、開発者ツール（デベロッパーツール）の[設定] から [ユーザーエージェント シャドウ DOM を表示] オプションを有効にして、Shadow DOM を表示できます。

以下は Chrome の開発者ツールで上記オプションを有効にして input 要素を確認する例です。

Chrome の場合、以下のように Track は ::-webkit-slider-runnable-track、Thumb は ::-webkit-slider-thumb というベンダープレフィックスの付いた疑似要素にスタイルが設定されているのがわかります。

ベンダープレフィックスの付いた疑似要素

Track や Thumb をスタイリングする場合、関連する要素に適切なスタイルを適用するために、ブラウザー固有のベンダープレフィックスの付いた疑似要素を利用することができます。

-webkit で始まる疑似要素は、WebKit 及び Blink ベースのブラウザー (Chrome、Safari、Opera、Edge など) に適用され、 -moz で始まるものは Firefox に適用されます。

ベーススタイル

ベースとなるスタイルを input[type="range"] に設定します。

以下ではセレクタを input[type="range"] としていますが、クラスなどを指定して特定のレンジスライダーに適用することもできます。

各ブラウザのデフォルトの（固有の）スタイルを取り除くため、-webkit-appearance と appearance に none を指定します。

appearance はプラットフォームネイティブのスタイル付けに使用されるプロパティです。none を指定することでデフォルトのスタイルを削除し、カスタマイズするためのスタイルを適用できるようにします。

outline: none を指定してデフォルトの focus のスタイルを削除し、別途 focus や active のスタイルを設定します。

また、背景色は Track を個別にベンダープレフィックスを使ってカスタマイズする場合のために透明にしていますが、Track を input[type="range"] に直接設定してカスタマイズする場合は不要です。

カーソルは操作できる要素であることがわかりやすいように pointer にしています。幅もデフォルトの値はブラウザにより異なるので統一するため指定しています。

input[type="range"] {
  /* デフォルトの appearance を削除（必須）*/
  -webkit-appearance: none;
  appearance: none;

  /* outline を削除してデフォルトの focus のスタイルを無効に */
  outline: none;

  /* デフォルトの背景色を透明に（Track をベンダープレフィックスで設定する場合）*/
  background: transparent;

  /* カーソルを pointer に */
  cursor: pointer;

  /* 幅を設定（任意の値）*/
  width: 100%;
}

上記のスタイルを適用すると Track の部分が取り除かれ、以下のように Thumb の部分のみが表示された状態になります。 Thumb の形状はブラウザにより異なります。Firefox の場合は Thumb のボーダーや背景色も取り除かれます。

※ 上記及び以降のサンプルではわかりやすいように親要素にグレーの背景色を指定して表示しています。

background: transparent を指定しない場合、input[type="range"] 自体の背景色（白）が残ります。

何もスタイルを指定していないデフォルトのレンジスライダーは以下のように表示されます。

Track を input 要素に直接設定

以下は Track のスタイルを input[type="range"] を使って設定（input 要素に直接指定）する例です。

input[type="range"] に指定したベーススタイルに Track のスタイルを追加します。

Track の背景色と高さを input 要素に指定し、角丸にする場合は border-radius を設定します。ベーススタイルに指定していた background: transparent; は Track の背景色を指定するので削除します。

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  /* background: transparent; 不要なので削除 */
  cursor: pointer;
  width: 100%;

  /* Track のスタイルを追加 */
  background: #efafda;  /* Track の背景色 */
  height: 8px;  /* Track の高さ */
  border-radius: 8px;  /* Track の角丸 */
}

上記は以下のように表示されます。Track は各ブラウザで同じように表示されますが、Thumb（つまみ部分）はブラウザにより異なって表示されます。

/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  border: none; /* つまみ部分の枠線を削除 */
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  width: 100%;
  background: #efafda;
  height: 8px;
  border-radius: 8px;
}

/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  border: none;
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  width: 100%;
  background: #efafda;
  height: 8px;
  border-radius: 8px;
}

/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
  border: 2px solid #333; /* つまみ部分に枠線を設定 */
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; /*  border-box を設定 */
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
  border: 2px solid #333;
}

Track をベンダープレフィックスで設定

Track のコンポーネントをベンダープレフィックスの付いた疑似要素で個別に設定する方法です。

この方法の場合、Thumb の位置の調整が必要になるなどの手間が増え、記述量も多くなります。また、input[type="range"] に background: transparent の指定が必要です。

以下は ::-webkit-slider-runnable-track 疑似要素と::-moz-range-track 疑似要素を使って Track をカスタマイズする例です。

/* Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-runnable-track {
  background: #efafda;
  height: 8px;
  border-radius: 8px;
}

/* Firefox */
input[type="range"]::-moz-range-track {
  background: #efafda;
  height: 8px;
  border-radius: 8px;
}

上記の設定とベーススタイルにより以下のように表示されます。

Chrome や Safari などの Webkit ベースのブラウザでは Thumb が Track の中心から下にずれて表示されので、別途 Thumb のスタイルで調整する必要があります。

/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  margin-top: -6px;   /* Thumb の位置を調整 */
  background-color: #4cabe2;
  border-radius: 50%;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  border: none;   /* ボーダーを削除 */
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: transparent; /* 背景を透明に*/
  cursor: pointer;
  width: 100%;
}

/* Track: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-runnable-track {
  background: #efafda;
  height: 8px;
  border-radius: 8px;
}

/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  margin-top: -6px;   /* Thumb の位置を調整 */
  background-color: #4cabe2;
  border-radius: 50%;
}

/* Track: Firefox */
input[type="range"]::-moz-range-track {
  background: #efafda;
  height: 8px;
  border-radius: 8px;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  border: none;
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
}

/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  margin-top: -6px;
  background-color: #4cabe2;
  border-radius: 50%;
  border: 2px solid #333; /* ボーダーを設定 */
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;  /* box-sizing: border-box を指定 */
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
  border: 2px solid #333; /* ボーダーを設定 */
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: transparent; /* 背景を透明に*/
  cursor: pointer;
  width: 100%;
}

/* Track: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-runnable-track {
  background: #efafda;
  height: 8px;
  border-radius: 8px;
}

/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  margin-top: -6px;   /* Thumb の位置を調整 */
  background-color: #4cabe2;
  border-radius: 50%;
  border: 2px solid #333;
}

/* Track: Firefox */
input[type="range"]::-moz-range-track {
  background: #efafda;
  height: 8px;
  border-radius: 8px;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
  border: 2px solid #333;
}

hover active focus

アクセシビリティのために focus スタイルを追加します。また、active と hover を追加することで、スライダーの操作中に視覚効果を提供することができます。

追加で :hover、:active 及び :focus 擬似クラスを Thumb（::-webkit-slider-thumb と ::-moz-range-thumb）に設定します。

デフォルトの focus のスタイルを削除するため、input[type="range"] に outline: none を指定します。この例ではベーススタイルで指定しています。

/* hover、active & focus（Thumb: Webkit） */
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 7px rgba(0, 30, 255, 0.1)
}
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(0, 30, 255, .2)
}
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(0, 30, 255, .2)
}

/* hover、active & focus（Thumb: Firfox） */
input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 7px rgba(0, 30, 255, .1)
}
input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 10px rgba(0, 30, 255, .2)
}
input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 10px rgba(0, 30, 255, .2)
}

Thumb（つまみ部分）にホバーしたり、操作すると半透明の box-shadow が表示されます。

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  outline: none; /* outline: none を指定 */
  cursor: pointer;
  width: 100%;
  background: #efafda;
  height: 8px;
  border-radius: 8px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
  border: none;
  height: 20px;
  width: 20px;
  background-color: #4cabe2;
  border-radius: 50%;
}

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 7px rgba(0, 30, 255, 0.1)
}
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(0, 30, 255, .2)
}
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(0, 30, 255, .2)
}

input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 7px rgba(0, 30, 255, .1)
}
input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 10px rgba(0, 30, 255, .2)
}
input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 10px rgba(0, 30, 255, .2)
}

カスタムデータ属性の利用

Track を input 要素に直接設定する方法で、input[type="range"] にカスタムデータ属性（data-* 属性）を設定して、Track の色を HTML 側で指定する例です。

HTML では data-bgc に Track の背景色を、data-active-bgc につまみの左側の領域の背景色を指定します。省略した場合は、JavaScript でデフォルトを設定した値が適用されます（片方のみを指定可能）。

但し、CSS で input[type="range"] に設定した背景色は上書きされます。

<input type="range" data-bgc="#b9dd83" data-active-bgc="#83c8dd">

JavaScript ではカスタムデータ属性の値を dataset プロパティを使って取得して、設定されていればその値を使用し、設定されていない場合はデフォルトの値を設定します。

document.addEventListener('DOMContentLoaded', () => {
  const rangeSliders = document.querySelectorAll('input[type="range"]');

  rangeSliders.forEach((slider) => {
    slider.addEventListener('input', (e) => {
      updateSlider(e.target);
    });
    updateSlider(slider);
  });

  function updateSlider(slider) {
    if(!slider.max) {
      slider.max = 100;
    }

    //Track の色（data-bgc が設定されていればその色を使用し、なければデフォルト値を設定）
    const bc =
      slider.dataset.bgc ? slider.dataset.bgc : '#efafda';

    //Track のつまみの左側の部分の色（data-active-bgc が設定されていればその色を使用）
    const ac =
      slider.dataset.activeBgc ? slider.dataset.activeBgc : '#87ac98';

    const progress = (slider.value / slider.max) * 100;
    slider.style.background =
       `linear-gradient(to right, ${ac} ${progress}%, ${bc} ${progress}%)`;
  }

});