CSS Input Range Tooltips

by AntowaKartowa

HTML

<!-- 
  December 2025: it doesn't work in Firefox and Safari
  
  CSS only input range tooltip
-->
<label>
  <input type="range" id="one" min="0" max="120" step="1" value="20">
  <output for="one" style="--min: 0;--max: 120"></output>
</label>  
<label style="--c: #BD1550">
  <input type="range" id="two" min="-50" max="50" step="1" value="0">
  <output class="bottom" for="two" style="--min: -50;--max: 50"></output>
</label>

CSS

@property --val {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --e {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

label {
  --c: #547980; /* slider color */
  --g: round(0.3em, 1px); /* the gap */
  --l: round(0.2em, 1px); /* line thickness*/
  --s: round(1.3em, 1px); /* thumb size*/
  --t: round(0.8em, 1px); /* tooltip tail size */
  --r: round(0.8em, 1px); /* tooltip radius */

  timeline-scope: --thumb-view;
  anchor-scope: --thumb;
  font-size: 24px;
}

input {
  width: 400px;
  height: var(--s); /* needed for Firefox*/
  --_c: color-mix(in srgb, var(--c), #000 var(--p, 0%));
  appearance: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  font-size: inherit;
}
input:focus-visible,
input:hover {
  --p: 25%;
}
input:active,
input:focus-visible {
  --_b: var(--s);
}
/* chromium */
input[type="range"]::-webkit-slider-thumb {
  height: var(--s);
  aspect-ratio: 1;
  /* rounded thumb */
  border-radius: 50%;
  /* 
  thumb border made by shadow inside on size of 
  full thumb (--_b) or by default line thickness (--l) 
  */
  box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
  /* slider line
  line with 2 colors (--_c and #ababab) without gradual color change
  color switch is always in the middle of thumb (put 10% or 90% instead of 50%)
    border-image-source: linear-gradient(90deg, var(--_c) 50%, #ababab);
  take 0 vertical part and 1 horizonla part of the 'image'
    border-image-slice: 0 1;
  we take 50% of element's height and subtract half of line thickness to get line thickenss?
  for horizontal we take all available space 100vw.
    border-image-width: calc(50% - var(--l)/2) 100vw;
  outset of the thumb I guess. vertically no outset.
  horizontally 100vw make line touching the thumb by adding gap (--g) we increase outset
  on gap value on both sides. 
    border-image-outset: 0 calc(100vw + var(--g));
   */
  border-image:...