0

Me interesa poder mover el range desde el span sin tener que hacer click directamente en el.

Obviamente el range se movera dejando el click sostenido, normal, como si lo estuviera haciendo directamente en el range ¿Cómo lo puedo lograr?

body{
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
input{
width: 100%;
}
span{
color: #fff;
padding: 10px;
background-color: green;
text-align: center;
cursor:  context-menu;
}
<input type="range">

<span>Click aquí para mover el range</span>

1 respuesta 1

1

Asigna un "event listener" a tu "span" que modifique el atributo "value" de tu "input".

Ejemplo:

var span = document.querySelector('span');
var input = document.querySelector('input');
span.addEventListener('click',function(){
  if(input.value > 20){
    input.value = input.value  - 10
  } else {
    input.value = 90
  }
});
body{
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
input{
width: 100%;
}
span{
color: #fff;
padding: 10px;
background-color: green;
text-align: center;
cursor:  context-menu;
}
<input type="range">

<span>Click aquí para mover el range</span>

Referencias

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.