【HTML/CSS】カスタムスライダーの作り方

概要

この記事では、HTML/CSSを使用してカスタムスライダーを作成する方法を紹介しています。

要点

• <input type="range">要素をカスタマイズして、外観やスタイルを自由に変更するコード例

• スタイルの設定方法やブラウザ間の互換性についても説明

コード

/* ベースのスタイル */
input[type="range"] {
    -webkit-appearance: none; /* ブラウザのデフォルトのスタイルをリセット */
    appearance: none;
    width: 100%; /* 幅を100%に設定 */
    height: 10px; /* スライダーの高さ */
    background: #ddd ; /* スライダーの背景色 */
    border-radius: 5px; /* 角丸 */
    outline: none; /* フォーカス時のアウトラインを非表示に */
}

/* スライダーのつまみ */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* ブラウザのデフォルトのスタイルをリセット */
    appearance: none;
    width: 20px; /* つまみの幅 */
    height: 20px; /* つまみの高さ */
    background: #555 ; /* つまみの背景色 */
    border-radius: 50%; /* つまみを丸くする */
    cursor: pointer; /* マウスを合わせた時のカーソルをポインターに */
}

/* Firefox用のスタイル */
input[type="range"]::-moz-range-thumb {
    width: 20px; /* つまみの幅 */
    height: 20px; /* つまみの高さ */
    background: #555 ; /* つまみの背景色 */
    border-radius: 50%; /* つまみを丸くする */
    cursor: pointer; /* マウスを合わせた時のカーソルをポインターに */
}

コード解説

/* ベースのスタイル */
input[type="range"] {
    -webkit-appearance: none; /* ブラウザのデフォルトのスタイルをリセット */
    appearance: none;
    width: 100%; /* 幅を100%に設定 */
    height: 10px; /* スライダーの高さ */
    background: #ddd ; /* スライダーの背景色 */
    border-radius: 5px; /* 角丸 */
    outline: none; /* フォーカス時のアウトラインを非表示に */
}

● input[type="range"]
<input> 要素の中で、 type 属性が "range" に設定されたスライダー要素の基本的なスタイルを定義

● -webkit-appearance: none;　と　appearance: none;
ブラウザのデフォルトのスタイルをリセットして、カスタムスタイルを適用するための指定です。

● width: 100%;
スライダーの幅を親要素に対して100%に設定し、親要素いっぱいに広がるようにしてます。

● height: 10px;
スライダーの高さ(太さ)を設定します。

● background: #ddd ;
スライダーの背景色を変更できます。

● border-radius: 5px;
スライダーの角を丸くします。

● outline: none;
フォーカス時のアウトラインを非表示にします。デフォルトではブラウザによってフォーカス時に青い枠が表示されますが、ここで非表示にすることでスタイルが統一されます。

/* スライダーのつまみ */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* ブラウザのデフォルトのスタイルをリセット */
    appearance: none;
    width: 20px; /* つまみの幅 */
    height: 20px; /* つまみの高さ */
    background: #555 ; /* つまみの背景色 */
    border-radius: 50%; /* つまみを丸くする */
    cursor: pointer; /* マウスを合わせた時のカーソルをポインターに */
}