Как сделать такой прогресс бар на range input

Question

Как реализовать такой range он должен быть не активный и будет подключаться через бэк. Не могу понять как выставить прогрессбар и сам range

const sliderEl = document.querySelector("#range2")

sliderEl.addEventListener("input", (event) => {
  const tempSliderValue = event.target.value; 
  
  const progress = (tempSliderValue / sliderEl.max) * 100;
 
  sliderEl.style.background = `linear-gradient(to right, #f50 ${progress}%, #ccc ${progress}%)`;
})

.range-input {
  -webkit-appearance: none;
  appearance: none; 
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 6px;
  background: #ccc;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 15px;
  width: 15px;
  background-color: #f50;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}

.range-input::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #f50;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}

.range-input::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(255,85,0, .1)
}
.range-input:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)
}
.range-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)
}

.range-input::-moz-range-thumb:hover {
  box-shadow: 0 0 0 10px rgba(255,85,0, .1)
}
.range-input:active::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)
}
.range-input:focus::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(255,85,0, .2)    
}

.value2, .value3, .value4 {
  font-size: 26px;    
  width: 50px;
  text-align: center;
}
.range {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

<input type="range" min="3809335" max="4809335" value="3809335" id="range2" class="range-input" />

БЛОГ НА HUSL

Как сделать такой прогресс бар на range input

Ответы (0 шт):