Cambiar imagen del cursor de un range segun se desplace a derecha o izquierda

[mensajeescrito]

Bueno he hecho un avance importante, ya funciona el efecto que cuando muevo el curosr

a derecha o izquierda , este cambia su imagen por otra.

Pero el problema es que solo me funciona en el navegador firefox. y no me funciona en

chrome y deberia funcionar alli tambien.

He hecho un pequeño intento con el "if" de la imagen "icono_3.png" del codigo

para ver si me funciona en chrome poniendo:

Código Javascript:

changeBackgroundImage(".slider::-webkit-slider-thumb","url(icono_3.png)");
 

Pero nada, no me funciona

Si me pudieran ayudar en esta ultima parte les estaria muy agradecido.

Miren este es el codigo:

Código HTML:

<div class="slidecontainer">
 
              <input type="range" min="1" max="5" value="50" class="slider" id="rangoPuntuacion">
 
            </div>
 
 
 
            <div id="rangoPuntuacion"></div>
 
            <div id="puntuacion"></div>
 

Código Javascript:

var varRangoPuntuacion = document.getElementById("rangoPuntuacion");
 
                var varPuntuacion = document.getElementById("puntuacion");
 
 
 
                varPuntuacion.innerHTML = varRangoPuntuacion.value; // Recojo el valor del control deslizante
 
 
 
                // Funcion que actualiza el valor del div demo 
                //cada vez que se arrastra el control deslizante
                varRangoPuntuacion.oninput = function() 
 
                    {
                        varPuntuacion.innerHTML = this.value;
 
 
 
                        if(varRangoPuntuacion.value == 1)
 
                            {
                                changeBackgroundImage(".slider::-moz-range-thumb","url(icono_1.png)");
                            }
 
 
 
                        if(varRangoPuntuacion.value == 2)
 
                            {
                                changeBackgroundImage(".slider::-moz-range-thumb","url(icono_2.png)");
                            }
 
 
 
                        if(varRangoPuntuacion.value == 3)
 
                            {
                                //changeBackgroundImage(".slider::-moz-range-thumb","url(icono_3.png)");
 
                                changeBackgroundImage(".slider::-webkit-slider-thumb","url(icono_3.png)");
                            }
 
 
 
                        if(varRangoPuntuacion.value == 4)
 
                            {
                                changeBackgroundImage(".slider::-moz-range-thumb","url(icono_4.png)");
                            }
 
 
 
                        if(varRangoPuntuacion.value == 5)
 
                            {
                                changeBackgroundImage(".slider::-moz-range-thumb","url(icono_5.png)");
                            } 
                    } 
 
 
 
                    function changeBackgroundImage(className, value){
                            var ss = document.styleSheets;
                            for (var i=0; i<ss.length; i++) {
                                var ss = document.styleSheets;
                                var rules = ss[i].cssRules || ss[i].rules;
                                for (var j=0; j<rules.length; j++) {
                                    if (rules[j].selectorText === className) {
                                        rules[j].style.backgroundImage = value;
                                    }
                                }
                            }
                    }