<div class="container">
  <div class="element"></div>
</div>

<div class="actions">
  <div class="control">
    <label for="translateX">translateX:</label>
    <input type="range" id="translateX" min="-100" max="100" value="0" step="5" />
    <span id="translateXPer"></span>
    <span id="translateXPix"></span>
  </div>
  <div class="control">
    <label for="translateY">translateY:</label>
    <input type="range" id="translateY" min="-100" max="100" value="0" step="5" />
    <span id="translateYPer"></span>
    <span id="translateYPix"></span>
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

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

body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 100%;
  letter-spacing: 0.1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-blend-mode: hue;
}

.container {
  width: 300px;
  height: 300px;
  display: flex;
  position: relative;
  box-shadow: 0 0 0 1px #f36;
  justify-content: center;
  align-items: center;
  margin-top: auto;
}

.element {
  width: 300px;
  height: 300px;
  background-color: #09f;
}

:root {
  --translate-x: 0;
  --translate-y: 0;
}

.element {
  transform: translate(var(--translate-x), var(--translate-y));
}

.actions {
  padding: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  font-size: 1.5rem;
  margin-top: auto;
}

.control {
  margin: 0 5px;
}

const translateElement = document.querySelector(".element");

const rangeTranslateX = document.getElementById("translateX");
const rangeTranslateY = document.getElementById("translateY");

const translateXPer = document.getElementById("translateXPer");
const translateYPer = document.getElementById("translateYPer");

const translateXPix = document.getElementById("translateXPix");
const translateYPix = document.getElementById("translateYPix");

const elementRectWidth = translateElement.getBoundingClientRect().width;
const elementRectHeight = translateElement.getBoundingClientRect().height;

translateXPer.textContent = `${rangeTranslateX.value}%`;
translateYPer.textContent = `${rangeTranslateY.value}%`;

translateXPix.textContent = `(0px)`;
translateYPix.textContent = `(0px)`;

const documentElement = document.documentElement;

rangeTranslateX.addEventListener("change", (evt) => {
  const rangeValue = evt.target.value;

  documentElement.style.setProperty("--translate-x", `${rangeValue}%`);

  translateXPer.textContent = `${rangeValue}%`;

  const elementRectWidth = translateElement.getBoundingClientRect().width;

  const pixValue = (elementRectWidth * rangeValue) / 100;

  translateXPix.textContent = `(${pixValue}px)`;
});

rangeTranslateY.addEventListener("change", (evt) => {
  const rangeValue = evt.target.value;

  documentElement.style.setProperty("--translate-y", `${rangeValue}%`);

  translateYPer.textContent = `${rangeValue}%`;

  const elementRectHeight = translateElement.getBoundingClientRect().height;
  const pixValue = (elementRectHeight * rangeValue) / 100;

  translateYPix.textContent = `(${pixValue}px)`;
});