パーツ番号 04-12-11 ・ CSSのみ
細かい目盛り付きルーラー型スライダー
10%刻みの細かい目盛りと25刻みの数値ラベルを添えたルーラーのようなスライダーです。日数や距離など精密さを見せたい数値設定UIの見本に使えます。
プレビュー
ソースコード
HTML
<div class="d04-12-11-wrap">
<span class="d04-12-11-label">配送日数の目安</span>
<div class="d04-12-11-track">
<div class="d04-12-11-fill"></div>
<span class="d04-12-11-tick" style="left:0%"></span>
<span class="d04-12-11-tick" style="left:10%"></span>
<span class="d04-12-11-tick" style="left:20%"></span>
<span class="d04-12-11-tick" style="left:30%"></span>
<span class="d04-12-11-tick big" style="left:40%"></span>
<span class="d04-12-11-tick" style="left:50%"></span>
<span class="d04-12-11-tick" style="left:60%"></span>
<span class="d04-12-11-tick big" style="left:70%"></span>
<span class="d04-12-11-tick" style="left:80%"></span>
<span class="d04-12-11-tick" style="left:90%"></span>
<span class="d04-12-11-tick" style="left:100%"></span>
<div class="d04-12-11-thumb"></div>
</div>
<div class="d04-12-11-nums"><span>0</span><span>25</span><span>50</span><span>75</span><span>100</span></div>
</div>CSS
.d04-12-11{align-items:center;justify-content:center}
.d04-12-11-wrap{width:100%;max-width:250px;display:flex;flex-direction:column;gap:4px}
.d04-12-11-label{font-size:12px;color:#6b7280;font-weight:600;margin-bottom:6px}
.d04-12-11-track{position:relative;height:6px;background:#e5e7eb;border-radius:3px;margin:16px 0 4px}
.d04-12-11-fill{position:absolute;left:0;top:0;height:6px;width:62%;background:#0891b2;border-radius:3px}
.d04-12-11-tick{position:absolute;top:-4px;width:1px;height:12px;background:#cbd5e1}
.d04-12-11-tick.big{height:16px;top:-6px;width:2px;background:#94a3b8}
.d04-12-11-thumb{position:absolute;left:62%;top:50%;width:16px;height:16px;margin-left:-8px;margin-top:-8px;border-radius:50%;background:#fff;border:3px solid #0891b2;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.d04-12-11-nums{display:flex;justify-content:space-between;font-size:10px;color:#9ca3af}クラス名 .d04-12-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。