<div>
    <div class="center">
      <button onclick="connect()" class="connect">Connect</button>
      <button onclick="disconnect()" class="disconnect disabled red">Disconnect</button>
    </div>
    <div class="center">
      <div class="box"></div>
    </div>
  </div>
  <input onchange="inputChange(this)" type="range" max="600" min="200" value="600">
  
button {
      font-size: 16px;
      margin: 10px 20px;
      padding: 10px 20px;
      background: #07ab0e;
      color: #fff;
      border: 0;
      font-weight: bold;
      border-radius: 3px;
      cursor: pointer;
    }

    .red {
      background: #F44336;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }

    .box{
      background: cornflowerblue;
      height: 200px;
      width: 600px;
    }

    .center{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    input{
      position: absolute;
      transform: rotate(270deg);
      right: 200px;
      top: 200px;
      cursor: pointer;
    }
const box = document.querySelector('.box');

    const resizeObserver = new ResizeObserver(entries => { //modifying the DOM properties
      if(entries[0].contentRect.width < 300){
        entries[0].target.style.backgroundColor = 'green';
      }else if(entries[0].contentRect.width < 400){
        entries[0].target.style.backgroundColor = 'orange';
      }else if(entries[0].contentRect.width < 500){
        entries[0].target.style.backgroundColor = 'pink';
      }else if(entries[0].contentRect.width < 600){
        entries[0].target.style.backgroundColor = 'yellow';
      }else{
        entries[0].target.style.backgroundColor = 'cornflowerblue';
      }
    });

    let inputChange = (e) => box.style.width = e.value+"px"; // input range change

    let connect = () => {
      resizeObserver.observe(box); //start resizeObserver
      document.querySelector('.connect').classList.add('disabled');
      document.querySelector('.disconnect').classList.remove('disabled');
    }

    let disconnect = () => {
      resizeObserver.unobserve(box); //stop resizeObserver
      document.querySelector('.connect').classList.remove('disabled');
      document.querySelector('.disconnect').classList.add('disabled');
    }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.