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

[mensajeescrito]

Hola amigas y amigos veran tengo un codigo que me hace una range con un cursor que segun me desplace con el a derecha o izquierda, se me muestra un valor del uno al 5.

Lo que no se como hacer es que segun el valor del 1 al 5 , asi tiene que sustituirse el boton del range por una u otra imagen.

Como el intervalo del range es del 1 al 5 , pues segun este el cursor en uno u otro valor deberia mostrarse un icono en el cursor del range u otro.

Si me puedieran ayudar les estaria muy agradecido .

Mi codigo es el siguiente:

Código CSS:

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;  
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
 
 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: url('icono_1.png');
    cursor: pointer;
}
 
.slider::-moz-range-thumb {
    width: 44px;
    height: 44px;
    border: 0;
    background: url('icono_1.png');
    cursor: pointer;
}
 

Código HTML:

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

Código Javascript:

var slider = document.getElementById("myRange");
 
                var output = document.getElementById("demo");
 
 
 
                output.innerHTML = slider.value; // Recojo el valor del control deslizante
 
 
 
                // Funcion que actualiza el valor actual del control deslizante 
                //cada vez que se arrastre el control deslizante
                slider.oninput = function() 
 
                    {
                        output.innerHTML = this.value;
                    }
 

[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;
                                    }
                                }
                            }
                    }
 

[mensajeescrito]

Despues de mucho revisar el codigo creo que el fallo anda entre estas dos lineas
de codigo , auque me podria equivocar pero creo que no:

Son estas:

primera: (Que .slider::-webkit-slider-thumb, no este bien en su sintaxis para chrome)

Código Javascript:

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

o bien

segunda: (Que esta linea que si funciona para firefox, no funcione para chrome)

Código Javascript:

rules[j].style.backgroundImage = value;
 

Son mis dos hipotesis , pero si estoy en lo cierto no se como arreglarlo

necesito ayuda por favor

gracias