Как сбросить диапазон типов ввода на 0 на ползунке громкости при нажатии на кнопку отключения звука? - PullRequest
Новая
       9

Как сбросить диапазон типов ввода на 0 на ползунке громкости при нажатии на кнопку отключения звука?

0 голосов
/ 21 февраля 2020

У меня есть этот слайдер громкости: 

 <input id="volume-slider" type="range" min="0" max="1" step="0.1" value="0.5"></input>

      $("#volume-slider").on("change", function() {
        audio.volume = this.value;
        if (audio.volume === 0) {
          [... change class to make mute volume icon appear ...]
        } else {
          [... change class to make mute volume icon disappear ...]
        }
      });

Этот код работает нормально. Когда ползунок переходит на 0, появляется значок отключения звука.

Однако я хочу и обратное.

Я могу сделать что-то вроде: 

$("#speaker-button").on("click", function() {
audio.volume > 0 ? audio.volume = 0 : audio.volume = 0.5;
}

, который работает хорошо. Однако, когда я отключаю настройку громкости audio.volume до 0, она не перемещает ползунок диапазона ввода. Если я приглушу громкость с помощью кнопки отключения звука, я хочу, чтобы ползунок диапазона был от go до 0.

Как мне этого добиться?

1 Ответ

1 голос
/ 21 февраля 2020

Установите значение ползунка и запустите метод изменения.

Базовая c идея ниже, и я добавил код, который включит звук до последнего известного значения вместо сброса его на 0,5. 

const audio = { volume : 0 }
let lastVolume
const slider = $("#volume-slider").on("change", function() {
  var val = +this.value;
  audio.volume = val
  if (val) lastVolume = val
  console.log(audio.volume)
}).change();

$("#mute").on("click", function () {
  var val = audio.volume === 0 ? (lastVolume || 0.5) : 0
  slider.val(val).change()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="volume-slider" type="range" min="0" max="1" step="0.1" value="0.5"></input>

<button id="mute" type="button">Mute</button>
...