(setting disabled = 'true' didn't seem to work for me so this is another way around it)
How do you disable an HTML range slider, for example when a button is pressed:
<input type="range" class="tempo-slider" max="300" min="1" value="150" />
I couldn't find the answer anywhere but this is my fix to the issue:
My fix for it was constantly resetting the range slider's value when you a user tried to change it using:
event.target.value = bpm;
Where event is the clicking of the event slider.
My full code is here, I hope it can help someone:
//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>The full project should be done in the next week and available on my github here: https://github.com/MichealNestor01