如何禁用 html 范围滑块？
Posted
技术标签:
【中文标题】如何禁用 html 范围滑块？【英文标题】：How to disable a html range slider? 【发布时间】：2020-08-21 16:55:03 【问题描述】：（设置 disabled = 'true' 似乎对我不起作用，所以这是另一种解决方法）
如何禁用 html 范围滑块，例如按下按钮时：
<input type="range" class="tempo-slider" max="300" min="1" value="150" />
我在任何地方都找不到答案，但这是我对这个问题的解决方法：
【问题讨论】：
【参考方案1】：当您尝试使用以下方法更改范围滑块时，我的解决方法是不断重置范围滑块的值：
event.target.value = bpm;
其中 event 是事件滑块的点击。
我的完整代码在这里，我希望它可以帮助别人：
//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 范围滑块？的主要内容，如果未能解决你的问题，请参考以下文章
如何使 html5 滑块（输入类型='范围'）在 Firefox 中工作