更改输入类型的图像="range" thumb javascript

Question

我正在尝试在值更改时更改幻灯片范围的缩略图图像。

问题是我不知道如何 select thumb with javascript 作为 selector。你能帮忙吗？

      <div class="slider-bar">
              <input type="range" id="myRange" min="0" max="10" value="0" />
        </div>

            input[type=range]::-webkit-slider-thumb {
                        -webkit-appearance: none;
                        border: none;
                        height: 50px;
                        width: 50px;
                        border-radius: 50%;
                        background:url(images/image.jpg) center no-repeat;
                        margin-top: -24px;
                        }
            input[type=range]:focus {
                        outline: none;
                        }
            input[type=range]::-moz-range-thumb {
                        border: none;
                        height: 50px;
                        width: 50px;
                        border-radius: 50%;
                        background:url(images/image.jpg) center no-repeat;
                        margin-top: -24px;}

var slider = document.getElementById("myRange");
    function xvalue () {
        var x = document.getElementById("myRange").value;
        console.log(x);
        if(x==1 && x==2 && x==3) {
            thumb.style.backgroundImage = "url('images/image1.jpg')";
        } else if (x==4 && x==5 && x==6) {
            thumb.style.backgroundImage = "url('images/images/image2.jpg')";
        } else if (x==7 && x==8 && x==9 && x==10) {
            thumb.style.backgroundImage = "url('images/images/image3.jpg')";
        }
    }
   slider.addEventListener("change", xvalue);

Answer 1

您不能使用 JavaScript 修改 CSS 个伪选择器。

您需要做的只是切换一个 class 名称。

这是一个例子：

HTML

<div class="slider-bar">
  <input type="range" id="myRange" min="0" max="10" value="0" />
</div>

CSS

input[type=range] {
  -webkit-appearance: none;
}

 input[type=range]::-webkit-slider-thumb {
   background-image: :url(images/default.jpg);
 }

 input[type=range].MyClass-1::-webkit-slider-thumb {
   background-image: :url(images/thumb-1.jpg);
 }

 input[type=range].MyClass-2::-webkit-slider-thumb {
   background-image: :url(images/thumb-2.jpg);
 }

JavaScript

var slider = document.getElementById('myRange')

function onChange(event) {
  var x = event.target.value

  if (x <= 3) {
    slider.className = ''
  } else if (x > 3 && x <= 6) {
    slider.className = 'MyClass-1'
  } else if (x > 6) {
    slider.className = 'MyClass-2'
  }
}

slider.addEventListener('input', onChange)

JSFiddle 演示：https://jsfiddle.net/vbsmkfus/1/

更改输入类型的图像="range" thumb javascript

change image of input type="range" thumb javascript

javascript

input

onchange

range