CSS Only Range Input Controllers

by AntowaKartowa

HTML

<!-- More simplified example to make  -->
<div>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis
    hendrerit dapibus. Sed neque lacus, iaculis vel sodales eu, maximus vitae
    magna. Sed vel ornare neque, at maximus justo. Praesent at ante eget tellus
    efficitur iaculis. Fusce pellentesque odio id sagittis iaculis. Sed aliquet
    nec metus ac malesuada. Morbi sit amet ex accumsan, efficitur sem quis,
    ornare erat. Phasellus interdum enim non justo euismod aliquet. Phasellus ac
    dui id quam luctus egestas. Maecenas efficitur nibh augue, dignissim
    consectetur odio venenatis et.
   </p>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis
    hendrerit dapibus. Sed neque lacus, iaculis vel sodales eu, maximus vitae
    magna. Sed vel ornare neque, at maximus justo. Praesent at ante eget tellus
    efficitur iaculis. Fusce pellentesque odio id sagittis iaculis. Sed aliquet
    nec metus ac malesuada. Morbi sit amet ex accumsan, efficitur sem quis,
    ornare erat. Phasellus interdum enim non justo euismod aliquet. Phasellus ac
    dui id quam luctus egestas. Maecenas efficitur nibh augue, dignissim
    consectetur odio venenatis et.
   </p>
</div>
<div>
   <label>
     font-size: <input type="range" class="font-size" value="10" />
   </label>
</div>

CSS

@property --progress-ratio {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --font-size-min: 12px;
  --font-size-max: 64px;
  --font-size: calc(
    (var(--font-size-max) - var(--font-size-min)) * var(--progress-ratio) +
      var(--font-size-min)
  );

  timeline-scope: --progress-timeline;
  animation: linear both;
  animation-name: fontSize;
  animation-timeline: --progress-timeline;
  animation-range: entry 100% exit 0%;
}

@keyframes fontSize {
  0% {
    --progress-ratio: 1;
  }
}

input[type="range"] {
  overflow: hidden;
}

input[type="range"]::-webkit-slider-thumb {
  view-timeline: --progress-timeline inline;
}

input[type="range"]::-moz-range-thumb {
  view-timeline: --progress-timeline inline;
}


body {
  font-family: system-ui, sans-serif;
}

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

label {
  display: block;
}

label > input {
  vertical-align: middle;
}