@fylgja/form-extend/range-fill.css

The Fylgja form-extend component

@property --range-value {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
@keyframes range-observer {
  from {
    --range-value: 0;
  }
  to {
    --range-value: 100;
  }
}
:where(input[type=range]) {
  overflow: hidden;
}
@supports (timeline-scope: --foo) {
  :where(input[type=range]) {
    animation: range-observer linear reverse both;
    animation-timeline: --range-thumb;
    timeline-scope: --range-thumb;
  }
}
:where(input[type=range])::-moz-range-progress {
  block-size: var(--track-size);
  border-radius: var(--track-radius);
  background: var(--track-fill);
}
@supports (timeline-scope: --foo) {
  :where(input[type=range])::-webkit-slider-thumb {
    view-timeline: --range-thumb inline;
  }
}