<div class="parent">
  <div class="aspectratio">
    4 : 3

    <span id="height">height: 150px</span>
    <span id="width">width: ?</span>
  </div>
  <div class="controle">
    <label for="heightInput">height:</label>
    <input type="range" min="0" max="100" step="5" value="50" name="heightInput" id="heightInput">
    <output id="outval">50%</output>
  </div>
</div>

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

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

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #222;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  gap: 10px;
}

:root {
  --height: 50%;
}

.parent {
  height: 300px;
  background-color: #f36;
  min-width: 400px;
  position: relative;
}

.parent::after {
  content: "height: 300px";
  position: absolute;
  padding: 10px;
  font-size: 12px;
  background-color: #f36;

  top: 0;
  writing-mode: vertical-lr;
  text-align: center;
  left: 100%;
}

.aspectratio {
  height: var(--height);
  aspect-ratio: 4 / 3;

  background-color: #09f;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.aspectratio span {
  position: absolute;
  white-space: nowrap;
}

#width {
  left: 5px;
  right: 5px;
  bottom: calc(100% + 5px);
  text-align: center;
}

#height {
  top: 5px;
  bottom: 5px;
  writing-mode: vertical-lr;
  text-align: center;
  right: calc(100% + 5px);
}

.controle {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  display: flex;
  justify-content: center;
  align-items: center;
}

const boxElement = document.querySelector(".aspectratio");

const heightElement = document.getElementById("height");
const widthElement = document.getElementById("width");

const heightVal = boxElement.getBoundingClientRect().height;
const widthVal = boxElement.getBoundingClientRect().width;

widthElement.textContent = `width: ${heightVal}px`;

const rangHandler = document.getElementById("heightInput");
const outVal = document.getElementById("outval");

rangHandler.addEventListener("input", (etv) => {
  document.documentElement.style.setProperty(
    "--height",
    `${etv.target.value}%`
  );
  outVal.textContent = `${etv.target.value}%`;
  const heightVal = boxElement.getBoundingClientRect().height;
  const widthVal = boxElement.getBoundingClientRect().width;
  heightElement.textContent = `height: ${heightVal}px`;
  widthElement.textContent = `width: ${widthVal}px`;
});