input type="range"を使用して、希望デザインのスライダーを作りたい

Question

input type="range"を使用してスライダーを作成したいのですが、希望の形になえらず、どうしてもスライダーのつまみの部分が小さくなってしまいます。

画像のように、つまみが大きいスライダーでかつ、スライド後の部分は色をつけて表示したいと考えております。

どのようにコーディングすればよいでしょうか？
初心者質問で申し訳ありません。よろしくお願いいたします。

希望のスライダーイメージ

実際のできるもの

 <label class="status_range" for="range">
                  <input type="range" id="range" class="-range">
                  <span class="radio-txt"></span>
                </label>

コード

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  height: 10px;
  width: 90%;
  overflow: hidden;
  background: #d1d1d1;
  border-radius: 10px;
}

/* WebKit向けのつまみ */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 6;
  border-radius: 50%;
  border: 5px solid #008272;
  box-shadow: -100.1vw 0 0 100vw #008272;
}
/* Moz向けのつまみ */
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 6;
  border-radius: 50%;
  border: 5px solid #008272;
  box-shadow: -100vw 0 0 100vw #008272;
}


コード