スライドバー

HTMLでスライドバーを表示するには、input要素のtype="range"属性を用います。以下は一例です。

<input type='range' value='0' min='0' max='100' step='1'>

valueは現在の値を、minとmaxはそれぞれ取り得る最小値と最大値を、stepで値の間隔を指定します。

スライドバーの表示をデフォルトから変更する場合は、CSSを使ってカスタマイズします。ブラウザによって、対応する疑似要素を使い分けます。以下の記述は主にこちらのサイトを参考にしました。

Chrome・Safari・Opera

これらのブラウザでは、バーを::-webkit-slider-runnable-trackで、つまみを::-webkit-slider-thumbでカスタマイズします。

/* input要素のtype="range"属性を指定 */
input[type="range"] {

    /* 表示をリセット */
    -webkit-appearance: none;
}

/* 指定された要素をクリックした後またはしている時の表示を調整 */
input[type="range"]:focus,
input[type="range"]:active {

    /* 輪郭線を非表示 */
    outline: none;
}

/* バーのカスタマイズ */
input[type="range"]::-webkit-slider-runnable-track {

    /* 背景色を指定 */
    background-color: #D3D8B0;

    /* 高さを指定 */
    height: 4px;

    /* 幅を指定 */
    width: 100%;
}

/* つまみのカスタマイズ */
input[type="range"]::-webkit-slider-thumb {

    /* 表示をリセット */
    -webkit-appearance: none;

    /* 背景色を指定 */
    background-color: #D3D8B0;

    /* 枠の指定 */
    border: 1px solid #3A362D;

    /* 角の丸みを指定 */
    border-radius: 30%;

    /* 余白を指定 */
    margin-top: -8px;

    /* 高さを指定 */
    height: 20px;

    /* 幅を指定 */
    width: 10px;
}

デフォルトの装飾をリセットするには、-webkit-appearanceプロパティにnoneを指定します。つまみの中央にバーを表示させるために、margin-top: -8px;の指定で調整を加えています。これらの設定では、Chromeのスライドバーは次のように表示されます。

URL： ringil-music.com
ライブラリ： Bootstrap 3・JQuery 1.12.4