Button with slider confirmation

Question

I need to have slider confirmation button which will look like below

Initially look of the button will be:

After user completes the slide it must look like:

I currently have the code below. How to modify to achieve it

<button id="slider">
  <input id="confirm" type="range" value="0" min="0" max="100" />
  <span >File deleted.</span>
</button>
 

Answer 1

Input in a button is not valid HTML.

It is not trivial to do this from scratch. I am sure there are better widgets out there, but I had a go at it. The CSS vars can be extended to make the code less repetitive

Chrome/Firefox compatible version

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>