CSS Tip

Update CSS variables using range slider

Using scroll-driven animations, you can link a CSS variable with a range slider and easily update its value!

No more JavaScript to do this. A few lines of CSS, one HTML element and you can update any value in real time.

@property --_f {
  syntax: "<number>";
  inherits: true;
  initial-value: 0; 
}
:root {
  --font-size-min: 12px; /* define the min */
  --font-size-max: 64px; /* define the max */
  /* the variable you will be using */
  --font-size: calc(
      var(--font-size-max)*var(--_f) +
      var(--font-size-min)*(1 - var(--_f))
    );
/* No need to touch the below
   Yes, you can use --_f everywhere
*/
  timeline-scope: --_f;
  animation: var(--_f) linear both;
  animation-timeline: --_f;
  animation-range: entry 100% exit 0%;
}
@keyframes --_f {0%{--_f: 1}}

input[type="range"] { overflow: hidden; }
input[type="range"]::-webkit-slider-thumb{ 
  view-timeline: --_f inline;
}
/* --- */

p {
  font-size: var(--font-size);
}

Here is a demo where you can update three different variables (chrome-only for now)

See the Pen Update CSS variables using range slider (CSS-only) by Temani Afif (@t_afif) on CodePen.

More CSS Tips