Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Cambiar imagen del cursor de un range segun se desplace a derecha o izquierda

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

Volver
Nuevo Tema
<<>>
 
Vista:

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

Publicado por Sam (106 intervenciones) el 05/07/2018 16:55:56
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:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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;
}



1
2
3
4
5
6
7
8
9
10
11
12
<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>


1
2
3
4
5
6
7
8
9
10
11
12
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;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

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

Publicado por Sam (106 intervenciones) el 06/07/2018 19:12:57
Hola buenas pues he hecho algun avance les explico:

Consigo mediante el codigo que pongo a continuacion que cuando arrastro el cursor a derecha o a la izquierda , en un div que he puesto justo debajo aparece la imagen del icono correspondiente segun el valor del range.

Pero claro la imagen sale en el div y lo que necesito es que aparezca en lugar del cursor que hay por defecto. vamos que el cursor sea la imagen del icono y que este icono cambie segun se arrastre a derecha o izquierda.

Decir que si soy capaz de cambiar el cursor por defecto por una imagen mediante css

poniendo algo como:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}

Pero claro haciendolo con css no es la manera.

Hice un intento poniendo esto:

1
document.getElementById("pim::-moz-range-thumb").innerHTML.style.backgroundImage = "url('icono_1.png')";

Pero no me funciono

Gracias de antemano.

Este es el codigo:

1
2
3
4
5
<div id="myRange"></div>
 
    <div id="demo"></div>
 
<div id="imagen"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var slider = document.getElementById("myRange");
 
var output = document.getElementById("demo");
 
var imagen = document.getElementById("imagen");
 
 
 
output.innerHTML = slider.value; // Recojo el valor del control deslizante

 
 
 
// Funcion que actualiza el valor del div demo 

//cada vez que se arrastra el control deslizante

slider.oninput = function()
{
    output.innerHTML = this.value;
 
    if(slider.value == 1)
    {
        imagen.innerHTML="<img src='icono_1.png'>";
    }
 
 
    if(slider.value == 3)
    {
        imagen.innerHTML="<img src='icono_3.png'>";
    }
 
 
    if(slider.value == 4)
    {
        imagen.innerHTML="<img src='icono_4.png'>";
    }
 
 
    if(slider.value == 5)
    {
        imagen.innerHTML="<img src='icono_5.png'>";
    }
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Sergio
Val: 6
Ha disminuido su posición en 12 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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

Publicado por Sergio (2 intervenciones) el 07/07/2018 00:14:01
Estaba leyendo sobre cursor en css y encontre esto:


Puedes hacer que el cursor sea una imagen

1
2
3
.custom {
  cursor: url(images/my-cursor.png), auto;
}

teniendo conocimiento de eso con javascript puedes añadir esa propiedad, según se mueva quitarsela y ponerle otra vez esa propiedad con otra imagen, según te convenga.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

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

Publicado por Sam (106 intervenciones) el 07/07/2018 00:40:34
Gracias por tu ayuda Sergio. Pues es en eso mismo en lo que necesito ayuda. No se como implementar eso en Javascript para que el cursor cambie su imagen por otra según se desplace a un lado u otro.
Eso es en lo que necesito ayuda.

Poner una imagen en el cursor con css eso ya lo sé hacer.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

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

Publicado por Sam (106 intervenciones) el 07/07/2018 18:58:31
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:

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:

1
2
3
4
5
6
7
8
9
10
11
<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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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;
            }
        }
    }
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

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

Publicado por Sam (106 intervenciones) el 07/07/2018 23:25:29
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)

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)

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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar