スライドバー
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