如何单击静音按钮时将音量滑块上的输入类型范围重置为0？

Question

我有此音量滑块：

 <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时，它不会移动输入范围滑块。如果我使用“静音”按钮将音量静音，则希望范围滑块变为0。

我该如何实现？

Answer 1

设置滑块值并触发更改方法。

下面的基本思想，我添加了将取消静音为最后一个已知值的代码，而不是将其重置为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>