Criando um controle deslizante de intervalo de valores para um filtro sem usar o jQuery

Muitas vezes, nos sites de lojas on-line, e não apenas, você pode filtrar com um controle deslizante para selecionar um intervalo de valores. Em um dos projetos, eu também precisava fazer esse controle deslizante.

A primeira coisa que vem à mente é encontrar um já pronto e colá-lo no seu site. Então eu tive um problema. O plugin JqueryUI.slider que encontrei recusou-se a funcionar em alguns dispositivos móveis. Não consegui identificar o problema (mas não realmente, e queria mexer no código de outra pessoa) e decidi fazer minha própria "bicicleta".

Eu decidi fazer a "bicicleta" em JavaScript puro para não mexer com as bibliotecas. Como um amigo meu diz: "quanto menos conexões" esquerdas ", mais estável tudo funciona".

Portanto, a primeira coisa que fiz foi criar um modelo tão simples

<div class="filter"> <div> <span> 1</span> <div><number>10</number><number>50</number></div> <div class="slider"> <div class="block-min" onMouseDown="moveRange(this)" onTouchStart="moveRange(this)"></div> <div class="color-range"></div> <div class="block-max" onMouseDown="moveRange(this)" onTouchStart="moveRange(this)"></div> </div> </div> <div> <span> 2</span> <div><number>0</number><number>5</number></div> <div class="slider"> <div class="block-min" onMouseDown="moveRange(this)" onTouchStart="moveRange(this)"></div> <div class="color-range"></div> <div class="block-max" onMouseDown="moveRange(this)" onTouchStart="moveRange(this)"></div> </div> </div> </div> 

Na tela, fica assim

O controle deslizante com os próprios controles deslizantes está em um bloco com a classe "controle deslizante", na qual existem mais 2 blocos: o controle deslizante de valor mínimo e o controle deslizante de valor máximo da faixa.
Eles descrevem dois eventos:

1. onMouseDown - acionado quando agarramos o controle deslizante com o mouse;
2. onTouchStart - funciona em dispositivos móveis quando você toca o dedo em nosso controle deslizante.

Acima do controle deslizante, há um bloco com dois números - esse é o nosso valor máximo e mínimo.

 <div><number>0</number><number>5</number></div> 

Agora vamos para a própria função, que é chamada ao clicar.

 function moveRange (elem) { //      var coords = getCoords(elem); /*  */ var colorRange = elem.parentElement.children[1]; var f;//        var value; //  /*    */ var parent = {} parent.element = elem.parentElement; parent.coords = getCoords(parent.element); var block2 = {} if (elem.classList.contains('block-min')) { block2.element = elem.parentElement.children[2]; block2.coords = getCoords(block2.element); f=0; } else { block2.element = elem.parentElement.children[0]; block2.coords = getCoords(block2.element); f=1; } /*     */ var indicator = document.createElement('div'); if (elem.children.length){ elem.innerHTML = '';//   } elem.append(indicator); document.addEventListener('mousemove', onMouseMove);// -     document.addEventListener('mouseup', onMouseUp);// -      document.addEventListener('touchmove', onMouseMove);//   ,     document.addEventListener('touchend', onMouseUp); /*   DaD*/ elem.ondragstart = function(){ return false; } 

A função getCoords nos permite obter as coordenadas e tamanhos de nossos elementos.
Parece o seguinte.

 function getCoords(elem) { /*    */ let coords = elem.getBoundingClientRect(); /*    ,   */ return {// ,  : top : coords.top + window.pageYOffset, //     left : coords.left + window.pageXOffset, //      leftX: coords.left, //    rigth : coords.left + window.pageXOffset + coords.width, //   bottom : coords.top + window.pageYOffset + coords.height, //  width : coords.width //  } } 

Agora descrevemos as funções do manipulador.
A primeira função é onMouseMove, chamada quando o mouse se move. Só funcionará com movimento horizontal.

 function onMouseMove(e) { /*  */ e.preventDefault();//    /*      */ /*       ,    targetTouches*/ /*         targetTouches[0]*/ if (e.touches === undefined) { var pos = e.clientX; } else { var pos = e.targetTouches[0].clientX; } /*   */ let newLeft = pos - parent.coords.leftX; let rigthEdge = parent.coords.width - (coords.width+1); if (newLeft<0) { newLeft = 0; } else if (newLeft > rigthEdge) { newLeft = rigthEdge; } if (f == 0 && pos > block2.coords.left-block2.coords.width) { newLeft = block2.coords.left - block2.coords.width - 5 - parent.coords.leftX; }else if (f == 1 && pos < block2.coords.rigth + 5) { newLeft = block2.coords.rigth + 5 - parent.coords.leftX; } /*   */ elem.style.left = newLeft + 'px'; //    let rangeMin = +document.querySelector('.filter number:first-child').innerHTML; let rangeMax = +document.querySelector('.filter number:last-child').innerHTML; if(f==0){ value = (newLeft / (parent.coords.width / (rangeMax - rangeMin)) + rangeMin).toFixed(1); } else { value = (newLeft / (parent.coords.width / (rangeMax - rangeMin))+ 0.3 + rangeMin).toFixed(1); } /*   */ indicator.style.position = 'absolute'; indicator.style.fontSize = "14px"; indicator.style.left = - coords.width/2 + "px"; indicator.style.top = parseFloat(window.getComputedStyle(elem).getPropertyValue('top')) - 10 +"px"; /*          */ if (newLeft <= 0){ indicator.innerHTML= ""; } else if (newLeft >= rigthEdge) { indicator.innerHTML= ""; } else { indicator.innerHTML = value; } /*    */ if (f == 0) { colorRange.style.left = newLeft + coords.width + "px"; colorRange.style.width = block2.coords.left - getCoords(elem).left - coords.width + "px"; } else { colorRange.style.left = block2.coords.left - parent.coords.leftX + "px"; colorRange.style.width = getCoords(elem).left - block2.coords.left + "px"; } } 

E, finalmente, a função do manipulador do evento "botão de liberação" ou perda do ponto de contato em dispositivos móveis. Exclui todos os eventos adicionados anteriormente e deixa o controle deslizante no valor definido.

 function onMouseUp() { document.removeEventListener('mouseup', onMouseUp); document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('touchend', onMouseUp); document.removeEventListener('touchmove', onMouseMove); } 

E, claro, estilos CSS para nosso controle deslizante

 .filter { padding: 30px; width: 500px; } .filter>div { padding-top: 20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .filter>div>div { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } .filter .slider { margin-top: 10px; position: relative; height: 6px; background: #fff; border: 1px solid #000; } .filter .color-range { position: absolute; background: #a4a4a4; width: 97%; border: none; height: 6px; left: 15px; } .filter .block-min, .block-max { width: 15px; height: 25px; position: absolute; left: 0; top: -11.5px; background: #fff; border: 1px solid #000; border-radius: 4px; z-index: 1; } .filter .block-max{ left: 97%; } 

Veja a versão funcional desse controle deslizante aqui .

Todos os arquivos podem ser baixados no GitHub .

Uso agradável e trabalho fácil!