如何js制作滑动按钮

<div class="container">
  <input type="range" min="0" max="100" value="50" step="1">
  <span class="slider-value">50</span>
</div>

.container {
  position: relative;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 200px;
  height: 20px;
  background: #ddd;
  border-radius: 5px;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: #999;
  height: 10px;
  border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
}

.slider-value {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  padding: 5px 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #ccc;
}

const slider = document.querySelector("input[type='range']");
const sliderValue = document.querySelector(".slider-value");

slider.addEventListener("input", (e) => {
  sliderValue.innerText = e.target.value;
});