Slider

input type=range with a styled track and thumb. Keyboard stepping, Home/End, form participation — all native.

plain CSS — works everywhere

PreviewCode

<input
  type="range"
  min="0"
  max="100"
  value="60"
  aria-label="Volume"
  class="h-1.5 w-full max-w-sm cursor-pointer appearance-none rounded-full bg-secondary focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-primary/50 [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-primary/50 [&::-moz-range-thumb]:bg-background [&::-moz-range-thumb]:shadow-sm [&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-primary"
/>

How it works

The element itself is the track (h-1.5 bg-secondary rounded-full after appearance-none); the thumb is styled twice — [&::-webkit-slider-thumb]: and [&::-moz-range-thumb]: — and each engine ignores the other’s selectors because every utility is its own rule.
Current engines center the thumb on the track automatically. If you still support older WebKit builds that top-align it, add [&::-webkit-slider-thumb]:-mt-[5px] ((16px thumb − 6px track) / 2) — but don’t ship that to modern browsers, where it pushes the thumb above the track.
[&::-moz-range-progress]:bg-primary fills the track’s left side in Firefox. WebKit has no filled-track pseudo-element — that genuinely requires JS (or a background gradient bound to the value), so this component ships without it. Honesty over hacks.