【CSS】スライダー「input type=”range”」のデザインを変更する

こんにちは、さちです。

今回は、HTML のスライダー <input type="range"> のデザインを「CSS」で変更する方法について書いていきます。

CSS の書き方が少し特殊なので、備忘録です。

スライダーをデザインする

スライダーをデザインする

実行結果

結果

上はデフォルトのままのデザイン。下が CSS を適用したデザインです。

デフォルトのデザインは、表示するウェブブラウザー毎に異なります。

HTML

<input type="range">
<input type="range" class="slider" min="0" max="10" step="0.5" value="2">

各属性の意味は下記のとおりです。

	指定できること	初期値（無指定の場合）
min	スライダーの「最小値」	0
max	スライダーの「最大値」	100
step	ツマミの「変化量」	1
value	ツマミの「初期位置」	中央値

CSS

/* バー：全ブラウザー共通 */
.slider {
  -webkit-appearance: none;/* CSS適用のおまじない */
  appearance: none;/* CSS適用のおまじない */
  background: lightgreen;/* バーの色 */
  cursor: pointer;/* 重ねた時のカーソルデザイン */
  border-radius: 10px;/* 端を丸める */
  width: 250px;
  height: 10px;
}

/* ツマミ：Chrome, Safari, Edge用 */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;/* CSS適用のおまじない */
  background: orange;/* ツマミの色 */
  border-radius: 24px;/* 端を丸める */
  width: 24px;
  height: 24px;
  box-shadow: 0 0 3px rgba(165, 42, 42, 0.7);
}
.slider:active::-webkit-slider-thumb {
  background: gold;/* つかんだ時のツマミの色 */
}

/* ツマミ：Firefox用 */
.slider::-moz-range-thumb {
  background: orange;/* ツマミの色 */
  border-radius: 24px;/* 端を丸める */
  width: 24px;
  height: 24px;
  border: none;
  box-shadow: 0 0 3px rgba(165, 42, 42, 0.7);
}
.slider:active::-moz-range-thumb {
  background: gold;/* つかんだ時のツマミの色 */
}

「疑似要素」を使って「ツマミ」部分のデザインを変更しますが、「疑似要素」の名前が異なるため、Chrome 等と Firefox を別々で指定しないといけません。

ちなみに、共通する CSS が多いからと2つの「疑似要素」をまとめて指定しようとすると、上手く機能しないことがあるので注意して下さい。