JSFiddle - React, Tailwind, and code Playground

HTML

<div class="admin">
  <input type="range" min="300" max="940" step="1" value="940" id="slider">

  <p>Container is: <output id="op">940px</output><p>
  <p>width is: <output id="op2">470px</output><p>
  <p>Height is: <output id="op3">940px</output><p>
</div>

<div class="container" id="mod">
  <div id="half">
  
  </div>
</div>

CSS

.container{
  width: 940px;
  height:940px;
  background-color: grey;
}

#half{
  width:50%;
  height:100%;
  background-color: blue;
}

JavaScript

var slider = document.getElementById('slider'),
    mod = document.getElementById('mod'),
    op = document.getElementById('op'),
    op2 = document.getElementById('op2'),
    op3 = document.getElementById('op3'),
    half = document.getElementById('half');

slider.onchange = function () {
  mod.style.width = this.value + 'px';
  mod.style.height = this.value + 'px';
  op.innerHTML = `${this.value} px`;
  op2.innerHTML = `${half.offsetWidth} px`
  op3.innerHTML = `${half.offsetHeight} px`
;}