CSS Only Range Input Controllers

by AntowaKartowa

HTML

<!--
December 2025: it doesn't work in Firefox and Safari.

CSS only
-->
<label>
  font-size: <input type="range" class="font-size" value="10">
</label>
<label>
  line-height: <input type="range" class="line-height" steps="10" value="0">
</label>
<label>
  font-weight: <input type="range"  class="font-weight" steps="25">
</label>


<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>

CSS

@property --fs-ratio {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --lh-ratio {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --fw-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(--fs-ratio) +
      var(--font-size-min)
  );

  --line-height-min: 1;
  --line-height-max: 2;
  --line-height: calc(
    var(--line-height-max) * var(--lh-ratio) + var(--line-height-min) *
      (1 - var(--lh-ratio))
  );

  --font-weight-min: 300;
  --font-weight-max: 600;
  --font-weight: calc(
    (var(--font-weight-max) - var(--font-weight-min)) * var(--fw-ratio) +
      var(--font-weight-min)
  );

  timeline-scope: --fs-timeline, --lh-timeline, --fw-timeline;
  animation: linear both;
  animation-name: fontSize, lineHeight, fontWeight;
  animation-timeline: --fs-timeline, --lh-timeline, --fw-timeline;
  animation-range: entry 100% exit 0%;
}

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

@keyframes lineHeight {
  0% {
    --lh-ratio: 1;
  }
}

@keyframes fontWeight {
  0% {
    --fw-ratio: 1;
  }
}

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

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

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

.font-size {
  --timeline: --fs-timeline;
}

.line-height {
  --timeline: --lh-timeline;
}

.font-weight {
  --timeline: --fw-timeline;
}

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

p {
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}

label {
  display: block;
}

label > input {
  vertical-align: middle;
}