input type=range のスライダーのデザインをCSSでいい感じにする

HTMLの<input type="range">を使うと、簡単にレンジ入力欄（スライダー）を設置できますが、デフォルトでは見た目がいまいちです。

FireFox 83.0の場合

また、ブラウザによってレンジ入力欄のデフォルトのスタイルが異なります。

CSSで<input type="range">を良い感じに装飾する

レンジ入力欄はCSSで装飾できます。今回はそのサンプルを載せておきます。

例として<input type="range">にinput-rangeというクラス名をあてておきます。

HTML

<input type="range" class="input-range" name="foo" min="0" max="10">

CSS（SCSS）は以下のようにします。詳しくはコメントに書きました。

SCSS

// リセットCSS（すでに指定済なら不要）
* {
  box-sizing: border-box;
}

// リセットCSS（すでに指定済なら不要）
* {
  box-sizing: border-box;
}

.input-range {
  -webkit-appearance: none; // これ無しだとスタイルがほぼ全く反映されないので注意
  appearance: none;
  cursor: pointer; // カーソルを分かりやすく
  background: #8acdff; // バーの背景色
  height: 14px; // バーの高さ
  width: 100%; // スライダーの幅
  border-radius: 10px; // バーの端の丸み
  border: solid 3px #dff1ff; // バーまわりの線
  outline: 0; /* アウトラインを消して代わりにfocusのスタイルをあてる */
  &:focus {
    box-shadow: 0 0 3px rgb(0, 161, 255);
  }
  // -webkit-向けのつまみ
  &::-webkit-slider-thumb {
    -webkit-appearance: none; // デフォルトのつまみのスタイルを解除
    background: #53aeff; // 背景色
    width: 24px; // 幅
    height: 24px; // 高さ
    border-radius: 50%; // 円形に
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); // 影
  }
  // -moz-向けのつまみ
  &::-moz-range-thumb {
    background: #53aeff; // 背景色
    width: 24px; // 幅
    height: 24px; // 高さ
    border-radius: 50%; // 円形に
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); // 影
    border: none; // デフォルトの線を消す
  }
  // Firefoxで点線が周りに表示されてしまう問題の解消
  &::-moz-focus-outer {
    border: 0;
  }
  // つまみをドラッグしているときのスタイル
  &:active::-webkit-slider-thumb {
    box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
  }
}