input type="range"を使用してスライダーを作成したいのですが、希望の形になえらず、どうしてもスライダーのつまみの部分が小さくなってしまいます。
画像のように、つまみが大きいスライダーでかつ、スライド後の部分は色をつけて表示したいと考えております。
どのようにコーディングすればよいでしょうか?
初心者質問で申し訳ありません。よろしくお願いいたします。
希望のスライダーイメージ
実際のできるもの
HTML
<label class="status_range" for="range"> <input type="range" id="range" class="-range"> <span class="radio-txt"></span> </label> コード
CSS
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; } コード
まだ回答がついていません
会員登録して回答してみよう