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;
});
Usando uma cor diferente para a parte já selecionada: http://jsfiddle.net/6s6wvk3f/2/