Кнопка со слайдером подтверждения

document.addEventListener('DOMContentLoaded', () => {
  const sliderLabel = document.getElementById('sliderLabel');
  const confirmSlider = document.getElementById('confirm');
  const min = +confirmSlider.min;
  const max = +confirmSlider.max;
  const setPos = (field) => {
    var position = (+field.value - min) / (max - min) * 100
    field.style.background = `linear-gradient(to right, #4CAF50 0%, #4CAF50 ${position}%, #fff ${position}%, white 100%)`
  };

  confirmSlider.addEventListener('input', function() {
    setPos(this)
    if (this.value === this.max) {
      // delete the file and change the label
      sliderLabel.textContent = 'File deleted';
    }
  });
  setPos(confirmSlider);
});

:root {
  --thumb-icon: url('data:image/svg+xml,<svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24"><text x = "50%" y = "50%" dominant-baseline = "middle" text-anchor = "middle" fill = "white" font-size = "14" font-family = "Arial, sans-serif">></text></svg>');
}

#sliderContainer {
  width: 200px; /* Adjusted to fit the slider */
  margin: 20px;
  position: relative;
  display: flex;
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
}

input[type = "range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4CAF50 var(--thumb-icon) no-repeat center center;
  border-radius: 50%;
  cursor: pointer;
}

input[type = "range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4CAF50 var(--thumb-icon) no-repeat center center;
  border-radius: 50%;
  cursor: pointer;
}
input[type = "range"] {
  background: linear-gradient(to right, #4CAF50 0%, #4CAF50 50%, #fff 50%, #fff 100%);
  border: solid 1px #4CAF50;
  border-radius: 10px;
  height: 19px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

#sliderLabel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: smaller;
  font-family: sans-serif;
}

<div id = "sliderContainer">
  <input id = "confirm" type = "range" value = "0" min = "0" max = "100" />
  <span id = "sliderLabel">Yes, proceed</span>
</div>