<div class="rect"></div>

<form>
  <div class="controle">
    <label for="width">width:</label>
    <input type="range" id="width" name="width" min="100" max="500" step="50" value="400" />
    <output for="width" id="output-width">400</output>
    <span>px</span>
  </div>
  <div class="controle">
    <label for="ratio-w">ratio(w):</label>
    <input type="range" id="ratio-w" name="ratio-w" min="1" max="10" step="1" />
    <output for="ratio-w" id="output-ratio-w">4</output>
  </div>
  <div class="controle">
    <label for="ratio-h">ratio(h):</label>
    <input type="range" id="ratio-h" name="ratio-h" min="1" max="10" step="1" />
    <output for="ratio-h" id="output-ratio-h">3</output>
  </div>
</form>

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

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

.rect {
  background-color: #09f;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.28s ease;
}

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

.rect {
  --ratio-w: 4;
  --ratio-h: 3;
  --aspect-ratio: calc(var(--ratio-w) / var(--ratio-h));
  --width: 400;
  width: calc(var(--width) * 1px);
  height: calc(var(--width) * 1px / var(--aspect-ratio));
}

const rectElement = document.querySelector(".rect");
const rangeEles = document.querySelectorAll('input[type="range"]');
const outputEles = document.querySelectorAll("output");

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