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/

更改输入类型的图像=＆＃34;范围＆＃34;拇指javascript

1 个答案: