change image of input type="range" thumb javascript

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);