demo · v138

Temperature gauge gradient

One number — temperature in °C — drives five overlapping thresholds (cold, cool, mild, warm, hot) plus a continuous colour gradient. Each threshold is a comma-separated progress() call wrapped in clamp(0, ..., 1), so the bands stay quiet until you cross their edges.

Unflagged in Chrome 138. progress(value, start, end) returns a unitless number and may extrapolate below 0 or above 1. This demo uses clamp(0, progress(...), 1) wherever the UI needs a bounded threshold.
probing progress()…
22
-10
40

main gauge · marker hue from --cold + --hot, position from --p

progress(t, min, max) 0.64
cold thr 0
hot thr 0
25°
hot ≥ 32→36
warm 22→28
mild 14→18
cool 6→10
cold 2→-4

The CSS

.gauge {
  --p:    clamp(0, progress(var(--t), var(--t-min), var(--t-max)), 1);
  --hot:  clamp(0, progress(var(--t), 28, 38), 1);
  --cold: clamp(0, progress(var(--t), 8, -2), 1);

  /* Continuous colour from cold to hot */
  color: color-mix(
    in srgb,
    color-mix(in srgb, var(--text-black), var(--accent-blue) calc(var(--cold) * 65%)),
    var(--accent-rose) calc(var(--hot) * 70%)
  );
}

What's happening

  1. progress(value, start, end) is interpolation as a primitive — the inverse of mix(). Returns (value − start) / (end − start) using the current comma-separated CSS Values 5 grammar.
  2. Outside [start, end], the function can extrapolate below 0 or above 1, so threshold UI wraps it in clamp(0, ..., 1).
  3. Combined with color-mix(), one slider drives colour + length + status with a single math primitive.
  4. Five overlapping ranges (cold / cool / mild / warm / hot) each become their own meter bar — the bar fills as the temperature enters that band.

see also