<label>
  <input type="range" id="one" min="0" max="120" step="1" value="40">
  <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>  

@property --val {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0; 
}
@property --p {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%; 
}

label {
  --c: #547980; /* slider color */
  --g: round(.3em,1px);  /* the gap */
  --l: round(.2em,1px);  /* line thickness*/
  --s: round(1.3em,1px); /* thumb size*/
  /* tooltip dimension */
  --w: round(4em,1px); /*  width */
  --r: round(.7em,1px);  /* radius */
  /* tail dimension */
  --b: round(1em,1px); /* base */
  --h: round(.6em,1px); /* height */
  
  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;
  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" i]::-webkit-slider-thumb{
  height: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
  border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
  -webkit-appearance: none;
  appearance: none;
  transition: .3s;
  anchor-name: --thumb;
  view-timeline: --thumb-view inline;
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
  height: var(--s);
  width: var(--s);
  background: none;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
  border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
  -moz-appearance: none;
  appearance: none;
  transition: .3s;
  anchor-name: --thumb;
  view-timeline: --thumb-view inline;
}
output {
  position-anchor: --thumb;
  position: absolute;
  inset-area: top;
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  padding-block: .5em;
  width: var(--w);
  margin-block: calc(var(--h) + var(--g));
  translate: calc(50% - var(--p));
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    min(100%,var(--p) + var(--b)/2) 100%,
    var(--p) calc(100% + var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 100%);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    var(--r) calc(100% - var(--p) - var(--b)/2) 0 calc(var(--p) - var(--b)/2)/
    0 0 var(--h) 0;
  animation: range linear both;
  animation-timeline: --thumb-view;
  animation-range: entry 100% exit 0%;
}
output.bottom {
  inset-area: bottom;
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    0 calc(100% - var(--p) - var(--b)/2) var(--r) calc(var(--p) - var(--b)/2)/
    var(--h) 0 0 0;
  border-radius: min(var(--r),var(--p) - var(--b)/2) min(var(--r),100% - var(--p) - var(--b)/2) var(--r) var(--r)/var(--r);
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    min(100%,var(--p) + var(--b)/2) 0,
    var(--p) calc(-1*var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 0);
}
output:before {
  content: counter(num);
  counter-reset: num var(--val);
}

@keyframes range {
  0%   {--val:var(--max);--p:100%}
  100% {--val:var(--min);--p:0%}
}

@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);
}