<div style="max-width: 350px; margin: 2rem auto;">
  <input type="range" class="input-range" name="foo" min="0" max="12">
</div>












<!-- Code Kitchenのバナー -->
<a href="https://code-kitchen.dev/" style="display: table; position: fixed; bottom: 2px; right: 5px;" target="_blank"><img src="https://res.cloudinary.com/code-kitchen/image/upload/v1582096487/static/banner.svg" alt="Code Kitchen" width="110" height="30"></a>
// リセット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);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.