更改輸入類型=“范圍”拇指javascript的圖像

Question

我想在值改變時更改幻燈片范圍的拇指圖像。

問題是我不知道如何用javascript選擇拇指作為選擇器。 你能幫忙嗎？

      <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偽選擇器。

你需要做的只是切換一個類名。

這是一個例子：

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/