<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>
  <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>  

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

label {
  timeline-scope: --thumb-view;
  position: relative; /* No, It's not useless so don't remove it (or remove it and see what happens) */ 
  font-size: 24px;
}

input {
  width: 400px;
  cursor: pointer;
  overflow: hidden;
}


/* chromium */
input[type="range" i]::-webkit-slider-thumb{
  transition: .3s;
  anchor-name: --thumb;
  view-timeline: --thumb-view inline;
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
  transition: .3s;
  anchor-name: --thumb;
  view-timeline: --thumb-view inline;
}
output {
  animation: range linear both;
  animation-timeline: --thumb-view;
  animation-range: entry 100% exit 0%;
}
output:before {
  content: counter(num);
  counter-reset: num var(--val);
  position-anchor: --thumb;
  position: absolute;
  inset-area: top span-all;
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  padding-block: .5em;
  width: 4em;
  background: inherit;
  --e: var(--val);
  transition: --e .1s ease-out;
  rotate: calc((var(--e) - var(--val))*2deg);
  transform-origin: 50% 100%;
  margin-bottom: .2em;
  
}
output.bottom:before {
  inset-area: bottom span-all;
  rotate: calc((var(--val) - var(--e))*2deg);
  transform-origin: 50% 0;
  margin-top: .2em;
}

@keyframes range {
  0%   {background: #8A9B0F;--val:var(--max)}
  100% {background: #CC333F;--val:var(--min)}
}

@supports not (anchor-name: ---) {
  output {
    display: none;
  }
}

/**/
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  gap: 20px;
  place-content: center;
  background: repeating-linear-gradient(-45deg, #fff 0 20px, #f9f9f9 0 40px);
}