Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Cambiar imagen del cursor de un range segun se desplace a derecha o izquierda en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/07/2018, 08:38
 
Fecha de Ingreso: mayo-2012
Mensajes: 713
Antigüedad: 6 años, 5 meses
Puntos: 5
Cambiar imagen del cursor de un range segun se desplace a derecha o izquierda

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:
Ver original
  1. .slider {
  2.     -webkit-appearance: none;
  3.     width: 100%;
  4.     height: 15px;
  5.     border-radius: 5px;  
  6.     background: #d3d3d3;
  7.     outline: none;
  8.     opacity: 0.7;
  9.     -webkit-transition: .2s;
  10.     transition: opacity .2s;
  11. }
  12.  
  13.  
  14. .slider::-webkit-slider-thumb {
  15.     -webkit-appearance: none;
  16.     appearance: none;
  17.     width: 44px;
  18.     height: 44px;
  19.     border: 0;
  20.     background: url('icono_1.png');
  21.     cursor: pointer;
  22. }
  23.  
  24. .slider::-moz-range-thumb {
  25.     width: 44px;
  26.     height: 44px;
  27.     border: 0;
  28.     background: url('icono_1.png');
  29.     cursor: pointer;
  30. }



Código HTML:
Ver original
  1. <div class="slidecontainer">
  2.  
  3.               <input type="range" min="1" max="5" value="50" class="slider" id="myRange">
  4.  
  5.             </div>
  6.  
  7.  
  8.  
  9.  
  10.             <div id="myRange"></div>
  11.  
  12.             <div id="demo"></div>


Código Javascript:
Ver original
  1. var slider = document.getElementById("myRange");
  2.  
  3.                 var output = document.getElementById("demo");
  4.  
  5.  
  6.  
  7.                 output.innerHTML = slider.value; // Recojo el valor del control deslizante
  8.  
  9.  
  10.  
  11.                 // Funcion que actualiza el valor actual del control deslizante
  12.                 //cada vez que se arrastre el control deslizante
  13.                 slider.oninput = function()
  14.  
  15.                     {
  16.                         output.innerHTML = this.value;
  17.                     }
  #2 (permalink)  
Antiguo 06/07/2018, 10:58
 
Fecha de Ingreso: mayo-2012
Mensajes: 713
Antigüedad: 6 años, 5 meses
Puntos: 5
Respuesta: Cambiar imagen del cursor de un range segun se desplace a derecha o izquie

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:
Ver original
  1. 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:
Ver original
  1. <div class="slidecontainer">
  2.  
  3.               <input type="range" min="1" max="5" value="50" class="slider" id="rangoPuntuacion">
  4.  
  5.             </div>
  6.  
  7.  
  8.  
  9.             <div id="rangoPuntuacion"></div>
  10.  
  11.             <div id="puntuacion"></div>


Código Javascript:
Ver original
  1. var varRangoPuntuacion = document.getElementById("rangoPuntuacion");
  2.  
  3.                 var varPuntuacion = document.getElementById("puntuacion");
  4.  
  5.  
  6.  
  7.                 varPuntuacion.innerHTML = varRangoPuntuacion.value; // Recojo el valor del control deslizante
  8.  
  9.  
  10.  
  11.                 // Funcion que actualiza el valor del div demo
  12.                 //cada vez que se arrastra el control deslizante
  13.                 varRangoPuntuacion.oninput = function()
  14.  
  15.                     {
  16.                         varPuntuacion.innerHTML = this.value;
  17.  
  18.  
  19.  
  20.                         if(varRangoPuntuacion.value == 1)
  21.  
  22.                             {
  23.                                 changeBackgroundImage(".slider::-moz-range-thumb","url(icono_1.png)");
  24.                             }
  25.  
  26.  
  27.  
  28.                         if(varRangoPuntuacion.value == 2)
  29.  
  30.                             {
  31.                                 changeBackgroundImage(".slider::-moz-range-thumb","url(icono_2.png)");
  32.                             }
  33.  
  34.  
  35.  
  36.                         if(varRangoPuntuacion.value == 3)
  37.  
  38.                             {
  39.                                 //changeBackgroundImage(".slider::-moz-range-thumb","url(icono_3.png)");
  40.  
  41.                                 changeBackgroundImage(".slider::-webkit-slider-thumb","url(icono_3.png)");
  42.                             }
  43.  
  44.  
  45.  
  46.                         if(varRangoPuntuacion.value == 4)
  47.  
  48.                             {
  49.                                 changeBackgroundImage(".slider::-moz-range-thumb","url(icono_4.png)");
  50.                             }
  51.  
  52.  
  53.  
  54.                         if(varRangoPuntuacion.value == 5)
  55.  
  56.                             {
  57.                                 changeBackgroundImage(".slider::-moz-range-thumb","url(icono_5.png)");
  58.                             }
  59.                     }
  60.  
  61.  
  62.  
  63.                     function changeBackgroundImage(className, value){
  64.                             var ss = document.styleSheets;
  65.                             for (var i=0; i<ss.length; i++) {
  66.                                 var ss = document.styleSheets;
  67.                                 var rules = ss[i].cssRules || ss[i].rules;
  68.                                 for (var j=0; j<rules.length; j++) {
  69.                                     if (rules[j].selectorText === className) {
  70.                                         rules[j].style.backgroundImage = value;
  71.                                     }
  72.                                 }
  73.                             }
  74.                     }

Última edición por mensajeescrito; 07/07/2018 a las 10:43
  #3 (permalink)  
Antiguo 07/07/2018, 15:12
 
Fecha de Ingreso: mayo-2012
Mensajes: 713
Antigüedad: 6 años, 5 meses
Puntos: 5
Respuesta: Cambiar imagen del cursor de un range segun se desplace a derecha o izquie

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:
Ver original
  1. 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:
Ver original
  1. rules[j].style.backgroundImage = value;

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

necesito ayuda por favor

gracias



La zona horaria es GMT -6. Ahora son las 11:47.