Scroll-Driven Range Slider

Inputs are usually dumb components; they report values but rarely visualize them meaningfully. This slider breaks that mold. It uses the cutting-edge Scroll-Driven Animations API to map the “thumb’s” movement directly to the visual output — without a single line of JavaScript logic for the animation. It creates a tactile, liquid connection between the user’s action and the “mixing” of coffee and milk.

Core Technique

The magic lies in hijacking the browser’s scroll timeline to drive CSS animations based on input value.

• Timeline Scope: We declare timeline-scope: --thumb on the root. This allows the range input’s internal thumb movement to drive animations elsewhere in the DOM.
• View Timeline: The thumb is given view-timeline-name: --thumb and view-timeline-axis: inline. As it moves horizontally, it progresses the timeline from 0% to 100%.
• Animation Mapping: The track’s fill and the tooltip’s counter are animated by animation-timeline: --thumb. The CSS @keyframes sync updates the --value integer property, which in turn recalculates the hsl() colors and counter content in real-time.

Customization

The slider’s physics and colors are fully exposed via CSS variables.

Changing the Liquid Colors

.control__track {
  /* Coffee color logic */
  --coffee: hsl(
    24 74% calc(24% + (30% * ((100 - var(--value, 0)) / 100)) / 1) / 0.4
  );
  
  /* Milk opacity logic */
  --milk: hsl(
    0 0% 100% / calc(0.1 + (0.4 * ((100 - var(--value, 0)) / 100)))
  );
}

Tooltip Formatting. The tooltip uses CSS counters, which is a rare and powerful technique for no-JS text updates.

.tooltip::before {
  content: 'COFFEE ' counter(low) '%'; /* Dynamic text */
}

Browser Support

This demo relies on Scroll-Driven Animations, which is currently supported in Chromium-based browsers (Chrome 115+, Edge 115+) and Safari 26+. Firefox require feature flags or a polyfill. The code includes a JS fallback for unsupported browsers.