.talos-range is a native <input type="range"> stripped to a 2px hairline
track and a square thumb — no round handle, no iOS chrome. The styling is
declared twice, once for ::-webkit-slider-* and once for ::-moz-range-*, so
the same mechanical shape reads in every engine.
Default
<input class="talos-range" type="range" min="0" max="100" value="60" />appearance: none zeroes the UA control. The track is --talos-edge-default at
2px; the thumb is a 0.7×0.9rem --talos-foreground block, negative-margined to
straddle the line.
Focus
Tab to the thumb (or click it) and the ring brightens via :focus-visible.
<input class="talos-range" type="range" min="0" max="100" value="35" />:focus-visible draws the standard --talos-focus-ring outline around the
whole control — keyboard arrow-stepping stays visible.
Attributes
| Attribute | Effect |
|---|---|
type="range" | required — the class only styles native range inputs |
min / max / step | native range bounds; honoured as-is |
value | initial thumb position |
:focus-visible | renders the --talos-focus-ring outline |
Pseudo-elements styled: ::-webkit-slider-runnable-track, ::-webkit-slider-thumb,
::-moz-range-track, ::-moz-range-thumb. Wrap in a
.talos-field to pair with a label.