master @ 30 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ .slider { │
│ position: relative; │
│ white-space: pre; │
│ │
│ .slider-track { │
│ font-family: var(--mono-frame); │
│ } │
│ │
│ // The native input sits invisibly over the track for interaction. │
│ input[type="range"] { │
│ position: absolute; │
│ left: 0; │
│ top: 0; │
│ width: calc(var(--cell-w) * var(--slider-cells)); │
│ height: 100%; │
│ margin: 0; │
│ opacity: 0; │
│ cursor: pointer; │
│ } │
│ │
│ &:has(input:focus-visible) .slider-track { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 2px; │
│ } │
│ │
│ .slider-value { │
│ font-variant-numeric: tabular-nums; │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ .slider { │
│ position: relative; │
│ white-space: pre; │
│ │
│ .slider-track { │
│ font-family: var(--mono-frame); │
│ } │
│ │
│ // The native input sits invisibly over th │
│ e track for interaction. │
│ input[type="range"] { │
│ position: absolute; │
│ left: 0; │
│ top: 0; │
│ width: calc(var(--cell-w) * var(--slider │
│ -cells)); │
│ height: 100%; │
│ margin: 0; │
│ opacity: 0; │
│ cursor: pointer; │
│ } │
│ │
│ &:has(input:focus-visible) .slider-track { │
│ outline: 1px dashed var(--ink); │
│ outline-offset: 2px; │
│ } │
│ │
│ .slider-value { │
│ font-variant-numeric: tabular-nums; │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET