The –min and –max are defined on the output element (inline style) and the animation rely on them. You have to move them to label as well.

animation: range linear both;
animation-timeline: --thumb-view;
animation-range: entry 100% exit 0%;

to the label css section:

label {
  timeline-scope: --thumb-view; /* limit the scopes of the anchor to the label */
  anchor-scope: --thumb;
  position: relative;

  --c: var(--color-primary, Orange); /* active color */
  --g: round(.3em, 1px); /* the gap */
  --l: round(.2em, 1px); /* line thickness*/
  --s: round(1em, 1px); /* thumb size*/

  animation: range linear both;
  animation-timeline: --thumb-view;
  animation-range: entry 100% exit 0%;

  &:before {
    background-color: red;
    content: counter(num);
    counter-reset: num var(--val);
  }

  ...
}

and everything broke and the variable --val not set by the animation .
why is that ?

basically i want the slider be a hue selector and change the thumb background-color to the selected hue.
so i need the variable scope bubble up and be visible by the <output> and the thumb