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

<div class="second-container">
  <div class="ranges">
    <input class="xdirection" type="range" min="0" max="2" step="0.1" value="1">
    <input class="ydirection" type="range" min="0" max="2" step="0.1" value="1">
  </div>

  <output class="code-container">scale: <span class="token-function">1 1;</span> </output>
</div>

html, body{
  height:100vh;
  width:100%;
  background: #00136c;
  font-family: system-ui;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container{
  width: 100px;
  height: 100px;
  border:4px solid #fff;
}

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
/*   transform:scale(1,2); */
}

.second-container{
  margin-top:50px;
}

.ranges{
  display:flex;
  gap:100px;
}

input {
  width: 200px;
}

.code-container {
  margin-top:50px;
  display:inline-block;
  padding:15px;
  text-align: center;
  background-color: #272822;
  border-radius: 3px;
  color: #F8F8F2;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
}

.token-function {
  color: #E6DB74;
  width: 40px;
 
}

var box = document.querySelector('.box'),
    sliderX = document.querySelector('.xdirection'),
    sliderY = document.querySelector('.ydirection'),
    Xvalue = 1,
    Yvalue = 1,
    ans = `${Xvalue} ${Yvalue}`;

sliderX.addEventListener('input', function () {
  Xvalue = this.value;
  ans = `${Xvalue} ${Yvalue}`;
  box.style.scale = ans;
  document.querySelector('.token-function').textContent = ans;
}, false);

sliderY.addEventListener('input', function () {
  Yvalue = this.value;
  ans = `${Xvalue} ${Yvalue}`;
  box.style.scale = ans;
  document.querySelector('.token-function').textContent = ans;
}, false);