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

【问题标题】：How to reset input type range to 0 on volume slider when clicking on the mute button?单击静音按钮时，如何将音量滑块上的输入类型范围重置为 0？
【发布时间】：2020-02-21 23:19:06
【问题描述】：

我有这个音量滑块：

 <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。

我怎样才能做到这一点？

【问题讨论】：

所以将滑块值设置为零。

标签： javascript jquery html5-audio

【解决方案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>

【讨论】：