如果我的范围滑块= 0.5，如何更改按钮图像？ （JS）

Question

我正在寻找的基本想法是：

if audio range = 1 then set myButton image "fullVolume.png"

if audio range = 0.5 then set myButton image "halfVolume.png"

if audio range = 0 then set myButton image "muteVolume.png"

我已经设置了我的范围，我正在寻找的是使其在某些级别更改图片的代码。 我一直在寻找很长一段时间，如果你能帮到那真的很棒：）

这就是我目前使用的范围：

$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});

var audio = document.getElementbyId("audio");
var volumeSlider = document.getElementbyId("volumeSlider");

function setVolume() {
var audio = document.getElementById("audio");
audio.volume = document.getElementById("volumeSlider").value;

}

Answer 1

您可以绑定到每次拖动滑块时触发的事件。并执行您想要的操作

    $("#slider").slider({
    slide: function (event, ui) {
        console.log(ui.value);
        if (ui.value === 1) {
            $('#myButton').attr('src', 'fullVolume.png');
        }
        else if (ui.value === 0.5) {
            $('#myButton').attr('src', 'halfVolume.png');
        }            
        else if (ui.value === 0) {
            $('#myButton').attr('src', 'muteVolume.png');
        }
     }
    });

Jquery UI Slider documentation