<div class="box">
  <span>aspect-ratio:</span>
  <span class="w">1</span>
  <span>/</span>
  <span class="h">1</span>
</div>
<div class="box2">
  <span>aspect-ratio:</span>
  <span class="w">1</span>
  <span>/</span>
  <span class="h">1</span>
</div>

<form>
  <div class="controle">
    <label for="w">ratio(w):</label>
    <input type="range" id="w" name="w" min="1" max="10" step="1" value="1" />
    <output for="w" id="output-w">1</output>
  </div>
  <div class="controle">
    <label for="h">ratio(h):</label>
    <input type="range" id="h" name="h" min="1" max="10" step="1" value="1" />
    <output for="h" id="output-h">1</output>
  </div>
</form>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* unitless base font size variables in px */
  --unitless-min-font-size: 15;
  --unitless-max-font-size: 18;

  /* unitless viewport widths in px */
  --unitless-lower-font-range: 460;
  --unitless-upper-font-range: 1200;

  --font-size-difference: calc(
    var(--unitless-max-font-size) - var(--unitless-min-font-size)
  );
  --font-range-difference: calc(
    var(--unitless-upper-font-range) - var(--unitless-lower-font-range)
  );
  --viewport-difference: calc(100vw - (var(--unitless-lower-font-range) * 1px));
  font-size: calc(
    (var(--unitless-min-font-size) * 1px) + var(--font-size-difference) *
      var(--viewport-difference) / var(--font-range-difference)
  );
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  font-family: "Exo", Arial, sans-serif;
  background-color: #151522;
  color: #fff;
  place-content: center;
  padding: 10px;
}

.box,
.box2 {
  background-color: #09f;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.box2 {
  background-color: #f90;
}

.box::before,
.box2::before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  text-align: center;
}

.box::before {
  content: "width: 10rem";
}

.box2::before {
  content: "height: 10rem";
}
form {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vh;
  gap: 10px;
}

.controle {
  display: inline-flex;
  align-items: center;
}

:root {
  --ratio-w: 1;
  --ratio-h: 1;
  --ratio: calc(var(--ratio-w) / var(--ratio-h));
  --width: 10rem;
  --height: 10rem;
}

.box {
  width: var(--width);
  aspect-ratio: var(--ratio);
}

.box2 {
  height: var(--height);
  aspect-ratio: var(--ratio);
}

const rootEle = document.documentElement;
const rangeEles = document.querySelectorAll('input[type="range"]');
const outputEles = document.querySelectorAll("output");
const wSpan = document.querySelectorAll(".w");
const hSpan = document.querySelectorAll(".h");

rangeEles.forEach((element, index) =>
  element.addEventListener("input", (evt) => {
    rootEle.style.setProperty(
      `--ratio-${evt.target.id}`,
      `${evt.target.value}`
    );
    outputEles[index].innerText = evt.target.value;

    if (evt.target.id === "w") {
      wSpan.forEach((element) => (element.innerText = evt.target.value));
    }
    if (evt.target.id === "h") {
      hSpan.forEach((element) => (element.innerText = evt.target.value));
    }
  })
);