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;
}


コード

Answer 1

つまみ自体はsvgなど利用すれば好きな形や大きさにできます（オフセットは調整が必要）

<style>
[type=range]{
  width:800px;
  -webkit-appearance: none;
}
[type=range]::-webkit-slider-runnable-track{
  height: 20px;
  margin-top:8px;
  background: red;
  border-radius: 10px;
}
[type=range]::-moz-range-track{
  height: 20px;
  background: red;
  border-radius: 10px;
}

[type="range"]::-webkit-slider-thumb{
 -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -5px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30"><circle cx="15" cy="15" r="15" fill="red" /></svg>') no-repeat 0 0;
}
[type="range"]::-moz-range-thumb{
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30"><circle cx="15" cy="15" r="15" fill="red" /></svg>') no-repeat 0 0;
}
</style>
<input type="range" value="0" step="1" max="100" min="0">

Comments

[ayam]

＠yamabejpさん
ご回答いただきありがとうございます！！
つまみの大きさを変更することができました！

ただ、スライドバー全体の色が初期から着色されており、移動した分だけ塗りつぶす形にしたかったのですが、
こちらは難しいでしょうか？
私の知識不足で、オフセットが、その意味でしたら申し訳ありません。
よろしくお願いいたします

[hoku]

@yamabejpさん
margin-topをマイナスにすることでサムの位置をかえているとおもうのですが、こちらのマイナスする値はどのような計算式で成り立つのでしょうか？
目視で調整しかないですかね…？

Answer 2

つまみの大きさを変えればいいのではないでしょうか？

width: 10px;
height: 10px;

のところの値を24くらいにしてみたらどうでしょう？

追記
こんな感じのcssでどうでしょうか？

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  background: #d1d1d1;;
  height: 14px;
  width: 100%;
  border-radius: 10px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #008272;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0px 3px 6px 0px #008272;
}

私の環境ではこうなります

Comments

[ayam]

@Ftpsさん
回答ありがとうございます！

その場合も試してはみたのですが、スライダーばーの中に入り込んでしまい、丸が全面に出てこない形になってしまうのです。

コメントに画像を添付できず、わかりにくいかと思うのですが、
●＝＝＝＝＝にしたいのに、

ーーーーーーーーーーー
潰れた●　※スライダーバーの中
ーーーーーーーーーーー

のような形になってしまいます…

[Ftps]

cssを追記しました。多分できると思います！

[ayam]

@Ftpsさん
ありがとうございます！！
綺麗な丸の表示ができました。

ただ、移動後の塗りつぶしがなくなってしまい、こちらはcssでは難しいのでしょうか？

[Ftps]

ayamさんはbox-shadowを使用して作っていたのですが、つまみと干渉(overflow: hidden;)なので、::-ms-fill-lowerとかいじったらできるかもです！

[ayam]

調べてみます！！
ありがとうございました！！