パーツ番号 04-13-05 ・ CSSのみ

スライダー式満足度入力(静止表示)

つまみを固定位置で表示したスライダー型の満足度入力見本。アンケートやWeb診断コンテンツの評価UIに応用できる。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-05-wrap">
          <div class="d04-13-05-labels"><span>不満</span><span>満足</span></div>
          <div class="d04-13-05-track">
            <div class="d04-13-05-fill"></div>
            <span class="d04-13-05-thumb"></span>
          </div>
          <span class="d04-13-05-value">72%</span>
        </div>

CSS

.d04-13-05-wrap{width:240px}
        .d04-13-05-labels{display:flex;justify-content:space-between;font-size:11px;color:#94a3b8;margin-bottom:10px}
        .d04-13-05-track{position:relative;height:8px;border-radius:4px;background:#e2e8f0}
        .d04-13-05-fill{position:absolute;left:0;top:0;bottom:0;width:72%;border-radius:4px;background:linear-gradient(90deg,#fbbf24,#f97316)}
        .d04-13-05-thumb{position:absolute;left:72%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #f97316;box-shadow:0 1px 4px rgba(0,0,0,.25)}
        .d04-13-05-value{display:block;margin-top:10px;font-size:12px;font-weight:700;color:#f97316;text-align:right}

クラス名 .d04-13-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。