使用范围滑块控件进行超幅图像

Question

我有一个范围滑块控件，我希望用户使用它来更改显示图像的大小和位置。目前，我有一个单选按钮，用户可以用来选择背景。我也有一个复选框，用户可以选择显示图像。我需要有关滑块控件的帮助，以便用户用来更改显示图像。 fiddle link

//select a background
function backgd() {
    var bg1 = document.getElementById("radio-bg1");
    var bg2 = document.getElementById("radio-bg2");
    
    var bg = document.getElementById("background");
    if (bg1.checked) {
        bg.src = "../images/dolphins/background2.jpg";

    } else if (bg2.checked) {
        bg.src = "../images/dolphins/background3.jpg";

  }



//select image to display
var image=document.getElementsByClassName("images");
function displaybgimage() {
    for(var i=0;i<image.length;i++) {
        image[i].style.visibility = "hidden";
        var chek1 = document.getElementById("check-img1");
        var chek2 = document.getElementById("check-img8");

	if (chek1.checked) {
              image[i].style.visibility = "hidden";
             image[0].style.visibility = "visible";
        
         } else if (chek2.checked) {
              image[i].style.visibility = "hidden";
             image[1].style.visibility = "visible"; 
}

<!--user select image to display-->
<div id="container">
            <img id="background" src="../images/dolphins/background1.jpg" alt="background image" title="background image">

            <!-- image -->
            <img id="dolphin1" class="images" src="../images/dolphins/dolphin1.png" alt="dolphin 1" title="dolphin 1">
            <img id="dolphin2" class="images" src="../images/dolphins/dolphin2.png" alt="dolphin 2" title="dolphin 2">
            
        </div>