<div class="container">
  <div class="element">
    Content
  </div>
  <div class="control control__top">
    <label for="top">top:</label>
    <input type="range" id="top" name="position" min="-100" max="100" value="0" step="5">
    <span id="top--per">0%</span>
    (<strong id="top--pix">0px</strong>)
  </div>
  <div class="control control__right">
    <label for="right">right:</label>
    <input type="range" id="right" name="position" min="-100" max="100" value="0" step="5">
    <span id="right--per">0%</span>
    (<strong id="right--pix">0</strong>)
  </div>
  <div class="control control__bottom">
    <label for="bottom">bottom:</label>
    <input type="range" id="bottom" name="position" min="-100" max="100" value="0" step="5">
    <span id="bottom--per">0%</span>
    (<strong id="bottom--pix">0px</strong>)
  </div>
  <div class="control control__left">
    <label for="left">left:</label>
    <input type="range" id="left" name="position" min="-100" max="100" value="0" step="5">
    <span id="left--per">0%</span>
    (<strong id="left--pix">0px</strong>)
  </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: 500px;
  height: 300px;
  display: flex;
  position: relative;
  box-shadow: 0 0 2px 0 #f36;
  justify-content: center;
  align-items: center;
}

.container::before {
  content: "width: 500px";
  position: absolute;
  bottom: 100%;
  right: 0;
}

.container::after {
  content: "height: 200px";
  position: absolute;
  left: 100%;
  top: 50%;
  white-space: nowrap;
  transform: translate(-40%, -50%) rotate(90deg);
}

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

label:nth-of-type(2) {
  margin-left: 20px;
}

:root {
  --top: 0;
  --right: 0;
  --bottom: 0;
  --left: 0;
}

.element {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: #09f;
  top: var(--top);
  right: var(--right);
  bottom: var(--bottom);
  left: var(--left);
  position: absolute;
}

strong {
  color: #f89;
}

.control {
  position: absolute;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.control__top {
  left: 0;
  right: 0;
  bottom: calc(100% + 5px);
}

.control__bottom {
  left: 0;
  right: 0;
  top: calc(100% + 5px);
}

.control__right {
  top: 0;
  bottom: 0;
  right: -160px;
  transform: rotate(90deg);
}

.control__left {
  top: 0;
  bottom: 0;
  left: -160px;
  transform: rotate(-90deg);
}

.element > div {
  position: absolute;
}

.element__width {
  left: 0;
  right: 0;
  bottom: calc(100% + 5px);
}

.element__height {
  top: 0;
  bottom: 0;
  left: -30px;
  transform: rotate(90deg);
}

const rangeTop = document.getElementById("top");
const rangeRight = document.getElementById("right");
const rangeBottom = document.getElementById("bottom");
const rangeLeft = document.getElementById("left");

const topPerVal = document.getElementById("top--per");
const rightPerVal = document.getElementById("right--per");
const bottomPerVal = document.getElementById("bottom--per");
const leftPerVal = document.getElementById("left--per");

const topPixVal = document.getElementById("top--pix");
const rightPixVal = document.getElementById("right--pix");
const bottomPixVal = document.getElementById("bottom--pix");
const leftPixVal = document.getElementById("left--pix");

const containerElement = document.querySelector(".container");
const element = document.querySelector(".element");

const elementWidthValue = element.getBoundingClientRect().width;
const elementHeightValue = element.getBoundingClientRect().height;

const containerElementRectWidth = containerElement.getBoundingClientRect()
  .width;
const containerElementRectHeight = containerElement.getBoundingClientRect()
  .height;

element.textContent = `width: ${elementWidthValue}px; height: ${elementHeightValue}px`;

rangeTop.addEventListener("change", (etv) => {
  document.documentElement.style.setProperty("--top", `${etv.target.value}%`);

  const elementWidthValue = element.getBoundingClientRect().width;
  const elementHeightValue = element.getBoundingClientRect().height;
  element.textContent = `width: ${elementWidthValue}px; height: ${elementHeightValue}px`;

  const topRangeValue = etv.target.value;
  const topPixValue = (topRangeValue * containerElementRectHeight) / 100;

  topPerVal.textContent = `${topRangeValue}%`;
  topPixVal.textContent = `${topPixValue}px`;
});

rangeRight.addEventListener("change", (etv) => {
  document.documentElement.style.setProperty("--right", `${etv.target.value}%`);

  const elementWidthValue = element.getBoundingClientRect().width;
  const elementHeightValue = element.getBoundingClientRect().height;
  element.textContent = `width: ${elementWidthValue}px; height: ${elementHeightValue}px`;

  const rightRangeValue = etv.target.value;
  const rightPixValue = (rightRangeValue * containerElementRectWidth) / 100;

  rightPerVal.textContent = `${rightRangeValue}%`;
  rightPixVal.textContent = `${rightPixValue}px`;
});

rangeBottom.addEventListener("change", (etv) => {
  document.documentElement.style.setProperty(
    "--bottom",
    `${etv.target.value}%`
  );

  const elementWidthValue = element.getBoundingClientRect().width;
  const elementHeightValue = element.getBoundingClientRect().height;
  element.textContent = `width: ${elementWidthValue}px; height: ${elementHeightValue}px`;

  const bottomRangeValue = etv.target.value;
  const bottomPixValue = (bottomRangeValue * containerElementRectHeight) / 100;

  bottomPerVal.textContent = `${bottomRangeValue}%`;
  bottomPixVal.textContent = `${bottomPixValue}px`;
});

rangeLeft.addEventListener("change", (etv) => {
  document.documentElement.style.setProperty("--left", `${etv.target.value}%`);

  const elementWidthValue = element.getBoundingClientRect().width;
  const elementHeightValue = element.getBoundingClientRect().height;
  element.textContent = `width: ${elementWidthValue}px; height: ${elementHeightValue}px`;

  const leftRangeValue = etv.target.value;
  const leftPixValue = (leftRangeValue * containerElementRectWidth) / 100;

  leftPerVal.textContent = `${leftRangeValue}%`;
  leftPixVal.textContent = `${leftPixValue}px`;
});