如何在同一行中移动平滑滑块和我的div

<div class="container">
  <div class="slider"></div>
  <div class="content"></div>
</div>

.container {
  display: flex;
  align-items: center;
  width: 500px;
  height: 100px;
}

.slider {
  width: 50px;
  height: 100px;
  background-color: red;
}

.content {
  flex: 1;
  height: 100px;
  background-color: blue;
}

var slider = document.querySelector('.slider');
var container = document.querySelector('.container');

container.addEventListener('mousemove', function(event) {
  var x = event.clientX - container.offsetLeft;
  slider.style.transform = 'translateX(' + x + 'px)';
});

container.addEventListener('touchmove', function(event) {
  var x = event.touches[0].clientX - container.offsetLeft;
  slider.style.transform = 'translateX(' + x + 'px)';
});