Membuat rentang slider nilai untuk filter tanpa menggunakan jQuery

Sangat sering di situs web toko online, dan tidak hanya, Anda dapat memfilter dengan slider untuk memilih rentang nilai. Di salah satu proyek, saya juga perlu membuat slider seperti itu.

Hal pertama yang terlintas dalam pikiran adalah menemukan yang sudah jadi dan menempelnya di situs Anda. Lalu saya menemui masalah. Plugin JqueryUI.slider yang saya temukan menolak untuk berfungsi pada beberapa perangkat seluler. Saya tidak dapat mengidentifikasi masalah (tetapi tidak benar-benar, dan ingin melihat-lihat kode orang lain) dan memutuskan untuk membuat "sepeda" sendiri.

Saya memutuskan untuk melakukan "sepeda" dalam JavaScript murni agar tidak mengacaukan perpustakaan. Seperti yang dikatakan salah seorang teman saya: "semakin sedikit koneksi" kiri ", semuanya semakin stabil."

Karena itu, hal pertama yang saya lakukan adalah membuat model yang begitu sederhana

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

Di layar terlihat seperti ini

Penggeser dengan penggeser itu sendiri berada dalam blok dengan kelas "penggeser" di mana terdapat 2 blok lagi: penggeser nilai minimum dan penggeser nilai rentang maksimum.
Mereka menggambarkan dua peristiwa:

1. onMouseDown - dipicu ketika kita mengambil slider dengan mouse;
2. onTouchStart - berfungsi pada perangkat seluler saat Anda menyentuh jari Anda di slider kami.

Di atas slider adalah blok dengan dua angka - ini adalah nilai maksimum dan minimum kami.

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

Sekarang mari kita beralih ke fungsi itu sendiri, yang dipanggil saat klik.

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

Fungsi getCoords memungkinkan kita untuk mendapatkan koordinat dan ukuran elemen kita.
Ini terlihat sebagai berikut.

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

Sekarang kami menjelaskan fungsi-fungsi handler.
Fungsi pertama adalah onMouseMove, yang dipanggil saat mouse bergerak. Ini akan berhasil hanya dengan gerakan 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"; } } 

Dan akhirnya, fungsi pengendali acara "tombol pelepas" atau hilangnya titik sentuh pada perangkat seluler. Ini menghapus semua peristiwa yang ditambahkan sebelumnya dan meninggalkan slider pada nilai yang ditetapkan.

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

Dan, tentu saja, gaya CSS untuk slider kami

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

Lihat versi kerja slider ini di sini .

Semua file dapat diunduh dari GitHub .

Penggunaan yang menyenangkan dan pekerjaan mudah!