Erstellen eines Schiebereglers für den Wertebereich für einen Filter ohne Verwendung von jQuery

Sehr oft können Sie auf den Websites von Online-Shops und nicht nur mit einem Schieberegler filtern, um einen Wertebereich auszuwählen. In einem der Projekte musste ich auch einen solchen Schieberegler erstellen.

Das erste, was Ihnen in den Sinn kommt, ist, ein fertiges zu finden und es auf Ihrer Website einzufügen. Dann bin ich auf ein Problem gestoßen. Das JqueryUI.slider-Plugin, das ich gefunden habe, konnte auf einigen Mobilgeräten nicht verwendet werden. Ich konnte das Problem nicht identifizieren (aber nicht wirklich, und ich wollte im Code eines anderen herumstöbern) und beschloss, mein eigenes "Fahrrad" zu bauen.

Ich habe beschlossen, das "Fahrrad" in reinem JavaScript zu machen, um nicht mit Bibliotheken herumzuspielen. Wie ein Freund von mir sagt: "Je weniger" linke "Verbindungen vorhanden sind, desto stabiler funktioniert alles."

Deshalb habe ich mir als erstes ein so einfaches Modell ausgedacht

<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> 

Auf dem Bildschirm sieht es so aus

Der Schieberegler mit den Schiebereglern selbst befindet sich in einem Block mit der Klasse "Schieberegler", in dem zwei weitere Blöcke vorhanden sind: der Schieberegler für den Minimalwert und der Schieberegler für den Maximalbereichswert.
Sie beschreiben zwei Ereignisse:

1. onMouseDown - wird ausgelöst, wenn wir den Schieberegler mit der Maus greifen.
2. onTouchStart - funktioniert auf Mobilgeräten, wenn Sie Ihren Finger auf unserem Schieberegler berühren.

Über dem Schieberegler befindet sich ein Block mit zwei Zahlen - dies sind unsere Maximal- und Minimalwerte.

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

Fahren wir nun mit der Funktion selbst fort, die beim Klicken aufgerufen wird.

 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; } 

Mit der Funktion getCoords können wir die Koordinaten und Größen unserer Elemente abrufen.
Es sieht wie folgt aus.

 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 //  } } 

Nun beschreiben wir die Handlerfunktionen.
Die erste Funktion ist onMouseMove, die aufgerufen wird, wenn sich die Maus bewegt. Es funktioniert nur mit horizontaler Bewegung.

 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"; } } 

Und schließlich die Handlerfunktion des Ereignisses „Release Button“ oder Verlust des Berührungspunkts auf Mobilgeräten. Es löscht alle zuvor hinzugefügten Ereignisse und belässt den Schieberegler auf dem eingestellten Wert.

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

Und natürlich CSS-Stile für unseren Slider

 .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%; } 

Sehen Sie sich hier die Arbeitsversion dieses Schiebereglers an .

Alle Dateien können von GitHub heruntergeladen werden .

Angenehme Bedienung und einfache Arbeit!