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