有没有办法用CSS重新创建这个网格滑块？

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

.slider-container {
  width: 300px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.slider {
  width: 100%;
  height: 100%;
  background-color: #ff0000;
  border: none;
  outline: none;
  -webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

const slider = document.querySelector('.slider');
slider.addEventListener('input', function() {
  const value = slider.value;
  const percent = (value - slider.min) / (slider.max - slider.min) * 100;
  slider.style.background = `linear-gradient(to right, #ff0000 0%, #ff0000 ${percent}%, #ccc ${percent}%, #ccc 100%)`;
});