2

Eu queria fazer um controlador de volume, já fiz o css, php, html, mas falta js e jquery pra finalizar. Eu queria que a .bola arrastasse por dentro da .controlar

CSS:

.bola {
width: 10px;
height: 10px;
}
.controlar {
width: 100px;
height: 10px;
}

HTML:

<div class="controlar"><div class="bola"></div></div>

1 Resposta 1

2

Respondi à pouco a uma pergunta com funcionalidade parecida.

Precisas 3 oscultadores de eventos:

  • quando o mouse for pressionado
  • quando o mouse fôr largado
  • quando o mouse fôr movido

Usando var ativo podes dar valor true ou false com o mousedown e mouseup. Dessa maneira o 3o oscultador de eventos vai saber se deve atuar ou não quando lê a primeira linha if (!ativo) return;

Depois podes usar uma lógica if (position < limites.left || position > limites.right) return; para impedir que arraste para fora das extremidades de .controlador.

Exemplo:

var slider = document.querySelector('.controlar .bola');
var limites = document.querySelector('.controlar').getBoundingClientRect();
var valor = document.getElementById('valor');
// arrastar slider
var ativo = false;
var offset = 0;

function toggleAtivo(e) {
    if (e.target != slider) return;
    ativo = (e.type == 'mousedown');
    var sliderPosition = slider.getBoundingClientRect().left;
    offset = sliderPosition - e.pageX;
}
window.addEventListener('mousedown', toggleAtivo);
window.addEventListener('mouseup', toggleAtivo);
window.addEventListener('mousemove', function (e) {
    if (!ativo) return;
    var position = e.pageX + offset;
    if (position < limites.left || position > limites.right) return;
    slider.style.left = position + 'px';
    valor.innerHTML = position * limites.width / 100;
});

jsFiddle: http://jsfiddle.net/2osvj77q/

Usando uma cor diferente para a parte já selecionada: http://jsfiddle.net/6s6wvk3f/2/

3
  • 2
    Deu certo, mas eu só queria mais uma coisa, que quando movesse pro lado a ".bola", o lado que já passou no caso do lado da esquerda ficasse de uma cor, e o lado direito que no caso ainda falta passar por lá, fique de outra. Tem como? Tipo isso: prntscr.com/7wbm0e Commented 24/07/2015 às 3:53
  • 1
    bacano, acho que vou tentar implementar esta solução ao meu script em vez do input range no problema que tive ha dias dias, pois o input range parece variar o seu estilo de navegador para navegador.+1! =)
    – Chun
    Commented 24/07/2015 às 4:07
  • @Kloves seguindo a ideia da outra pergunta que referí podias fazer assim: jsfiddle.net/6s6wvk3f/2
    – Sergio
    Commented 25/07/2015 às 18:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .