実現したいこと
htmlでrangeを使ってスライダーバーを表示しているのですが、
それにメモリをつけたいです。
分かる方いらしたら、教えてください。
前提
cssで以下のように設定しているため、
標準の方法ではメモリを表示できないようです。
css
1#Slider { 2 -webkit-appearance: none; 3 appearance: none; 4 cursor: pointer; /* カーソルを分かりやすく */ 5 outline: none; /* スライダーのアウトラインは見た目がキツイので消す */ 6 height: 14px; /* バーの高さ */ 7 width: 850; /* バーの幅 */ 8 background: #8acdff; /* バーの背景色 */ 9 border-radius: 10px; /* バーの両端の丸み */ 10 border: solid 3px #dff1ff; /* バー周囲の線 */ 11}
該当のソースコード
html
1<input type="range" name="Slider" class="range" min="0" max="86399" step="1" id="Slider" list="Slider_markers"/> 2 <datalist id="Slider_markers"> 3 <option value="14400"></option> 4 <option value="28800"></option> 5 <option value="43200"></option> 6 <option value="57600"></option> 7 <option value="72000"></option> 8 </datalist>
css
1#Slider { 2 -webkit-appearance: none; 3 appearance: none; 4 cursor: pointer; /* カーソルを分かりやすく */ 5 outline: none; /* スライダーのアウトラインは見た目がキツイので消す */ 6 height: 14px; /* バーの高さ */ 7 width: 850; /* バーの幅 */ 8 background: #8acdff; /* バーの背景色 */ 9 border-radius: 10px; /* バーの両端の丸み */ 10 border: solid 3px #dff1ff; /* バー周囲の線 */ 11}
試したこと
rangeにlist要素を追加したのですがうまくいきませんでした。
回答1件
あなたの回答
tips
プレビュー