change image of input type="range" thumb javascript

Question

I am trying to change the image of the thumb for the slide range when the value is changing.

The problem is I don't know how to select the thumb with javascript as a selector. Can you please help?

      <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

You can't modify CSS pseudo-selectors with JavaScript.

What you need to do instead is simply toggle a class name.

Here's an example:

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 Demo: https://jsfiddle.net/vbsmkfus/1/