Как отключить ползунок диапазона html? - PullRequest
Новая
       39

Как отключить ползунок диапазона html?

0 голосов
/ 06 мая 2020

(настройка disabled = 'true', похоже, не сработала для меня, так что это другой способ обойти это)

Как отключить ползунок диапазона HTML, например, при нажатии кнопки : 

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

Я нигде не мог найти ответ, но это мое решение проблемы:

1 Ответ

0 голосов
/ 06 мая 2020

Мое исправление для этого постоянно сбрасывало значение ползунка диапазона, когда вы, пользователь, пытался изменить его, используя: 

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

...