v138 · css
Range Slider UI
Four slider controls where the visual feedback — fill width, colour zone, colour temperature, and threshold badge — all derive from progress(value, min, max). The bounded UI wraps the native ratio in clamp(0, ..., 1); JavaScript only updates custom properties.
/* CSS progress() — proportional distance between three calculations */
/* @property for typed custom props */
@property --value { syntax: ''; inherits: false; initial-value: 0; }
@property --min { syntax: ''; inherits: false; initial-value: 0; }
@property --max { syntax: ''; inherits: false; initial-value: 100; }
.fill {
width: calc(clamp(0, progress(var(--value), var(--min), var(--max)), 1) * 100%);
}
/* Colour zone: native progress() feeds the colour mix */
.zone {
background: color-mix(
in srgb,
var(--accent-emerald),
var(--accent-rose) calc(clamp(0, progress(var(--value), 0, 100), 1) * 100%)
);
}
The key insight:
progress(v, min, max) is a first-class
CSS function that returns a unitless proportional number. It can extrapolate below
0 or above 1, so this slider UI wraps it in clamp()
before feeding calc() and color-mix(). When the browser does not
support progress(), JavaScript supplies fallback custom properties instead of
writing widths, colours, or positions directly.