如何禁用 html 范围滑块？

Question

（设置禁用 = 'true' 似乎对我不起作用，所以这是另一种解决方法）

如何禁用 HTML 范围滑块，例如按下按钮时：

<input type="range" class="tempo-slider" max="300" min="1" value="150" />

我在任何地方都找不到答案，但这是我对问题的解决方法：

Answer 1

我的修复是在您尝试使用以下方法更改范围滑块的值时不断重置范围滑块的值：

event.target.value = bpm;

其中事件是点击事件滑块。

我的完整代码在这里，希望它能帮助到别人：

//This is code taken from a larger oop project and so some of the logic may look janky, but I just made it work for this example
//These two variable need to be predefined
let bpm = 150;
let playing = false;
//Select your slider and button from your html:
const tempoSlider = document.querySelector(".tempo-slider");
const playButton = document.querySelector(".play");

//Update the html function, essentially purely for styling
updateHTML = function () {
  if (!playing) {
    tempoSlider.classList.toggle("inactive");
    playButton.innerText = "Stop";
    playButton.classList.toggle("active");
    playing = true;
  } else {
    tempoSlider.classList.toggle("inactive");
    playButton.innerText = "Play";
    playButton.classList.toggle("active");
    playing = false;
  }
};
//this fucntion updates the temp text and the slider
function changeTempo(event) {
  //get the temp number from the document
  const tempoText = document.querySelector(".tempo-number");
  if (!tempoSlider.classList.contains("inactive")) {
    //if the slider isnt inactive then update the bpm as usual
    bpm = event.target.value;
    tempoText.innerText = bpm;
  } else {
    //else just make the slider reset to the preset bmp, this way it will not change
    event.target.value = bpm;
  }
}
//add event listeners to the button and the range slider
tempoSlider.addEventListener("input", function (event) {
  changeTempo(event);
});

playButton.addEventListener("click", function () {
  updateHTML();
});

/*All of this styling just makes it clear when the temp slider is inactive*/
:root {
  --background-color: #ffffff;
  --text-color: #322e2f;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.play {
  width: 10rem;
  transition: all 0.5s ease;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  background: var(--text-color);
  color: var(--background-color);
  border: none;
  cursor: pointer;
  margin-top: 3rem;
  outline: none;
  border: solid 0.01rem var(--text-color);
}
.play.active {
  color: var(--text-color);
  background: var(--background-color);
  border: solid 0.01rem var(--text-color);
}
.tempo {
  margin: 1rem;
  width: 20%;
}
.tempo-slider {
  transition: all 0.5s ease;
  padding: 0.3rem;
  -webkit-appearance: none;
  appearance: none;
  margin: 1rem 0rem;
  outline: none;
  width: 100%;
  position: relative;
  background: var(--text-color);
  cursor: pointer;
  border-radius: 2rem;
  border: solid 0.05rem var(--text-color);
}
.tempo-slider::-webkit-slider-thumb {
  transition: all 0.5s ease;
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 2rem;
  background: var(--background-color);
  cursor: pointer;
}
.tempo-slider.inactive {
  background: var(--background-color);
}
.tempo-slider.inactive::-webkit-slider-thumb {
  background: var(--text-color);
}
.tempo p {
  font-size: 1.5rem;
  text-align: center;
}

<!--This is part of a larger project I have scaled back to display the slider-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!--Basic button to say start an audio file-->
    <button class="play">Play</button>
    <!-- slider to devide the audio's bpm-->
    <div class="tempo">
      <input type="range" class="tempo-slider" max="300" min="1" value="150" />
      <p>Tempo: <span class="tempo-number">150</span></p>
    </div>
    <script src="app.js"></script>
  </body>
</html>

完整的项目应在下周完成，并可在我的 github 此处获取：https://github.com/MichealNestor01

如何禁用 html 范围滑块？

How to disable a html range slider?

html

javascript

css

html-input

rangeslider