带滑块确认按钮

Question

我需要有滑块确认按钮，如下所示

按钮的初始外观将是：

用户完成幻灯片后，它必须如下所示：

我目前有以下代码。如何修改才能实现

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

Answer 1

您不会在按钮中进行输入

从头开始做这件事并不简单。我确信那里有更好的小部件

document.getElementById('confirm').addEventListener('input', function() {
  const value = parseInt(this.value, 10);
  const max = parseInt(this.getAttribute('max'), 10);
  const sliderLabel = document.getElementById('sliderLabel');
  if (value === max) {
    // delete the file and change the label
    sliderLabel.textContent = 'File deleted';
  }
});

#sliderContainer {
  width: 200px; /* Adjust the width as needed */
  position: relative; /* Set relative positioning for positioning the label */
  margin: 20px;
}

input[type="range"] {
  width: 100%;
  -webkit-appearance: none; /* Remove default style */
  appearance: none;
  height: 20px; /* Height of the track */
  background: #ddd; /* Light grey background */
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
  border-radius: 10px; /* Fully rounded */
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  background: #4CAF50; /* Green color */
  cursor: pointer;
  border-radius: 50%; /* Makes the thumb circular */
}

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

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track {
  height: 20px;
  border-radius: 10px;
  background: #ddd;
}

#sliderLabel {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust positioning to the center */
  pointer-events: none; /* Allows the click to pass through the label to the slider */
  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>