إنشاء مجموعة من منزلق القيم للمرشح دون استخدام jQuery

في كثير من الأحيان على مواقع المتاجر على الإنترنت ، وليس فقط ، يمكنك تصفية مع شريط التمرير لتحديد مجموعة من القيم. في أحد المشاريع ، كنت بحاجة أيضًا إلى عمل شريط تمرير.

أول ما يتبادر إلى الذهن هو العثور على واحد جاهز ولصقه على موقعك. ثم واجهت مشكلة. البرنامج المساعد JqueryUI.slider الذي وجدته رفض العمل على بعض الأجهزة المحمولة. لم أتمكن من تحديد المشكلة (ولكن ليس في الحقيقة ، وأردت أن أتجول في كود شخص آخر) وقررت أن أصنع "دراجة" خاصة بي.

قررت أن أفعل "الدراجة" في جافا سكريبت خالص حتى لا تعبث مع المكتبات. وكما يقول أحد أصدقائي: "كلما قلت الاتصالات" اليسرى "، كلما كان كل شيء أكثر استقرارًا يعمل".

لذلك ، فإن أول شيء فعلته هو تكوين مثل هذا النموذج البسيط

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

على الشاشة يبدو مثل هذا

يوجد شريط التمرير مع المنزلقات نفسه في كتلة مع فئة "شريط التمرير" التي يوجد بها كتلتان أخريان: شريط التمرير الحد الأدنى للقيمة ومزلق القيمة القصوى للنطاق.
يصفون حدثين:

1. onMouseDown - يتم تشغيله عند الاستيلاء على شريط التمرير باستخدام الماوس ؛
2. onTouchStart - يعمل على الأجهزة المحمولة عندما تلمس إصبعك على شريط التمرير.

أعلى شريط التمرير عبارة عن كتلة بها رقمان - هذا هو الحد الأقصى والحد الأدنى لقيمنا.

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

الآن دعنا ننتقل إلى الوظيفة نفسها ، والتي تسمى عند النقر.

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

تتيح لنا وظيفة getCoords الحصول على إحداثيات وأحجام عناصرنا.
يبدو على النحو التالي.

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

الآن نحن تصف وظائف المعالج.
الوظيفة الأولى هي onMouseMove ، والتي تسمى عندما يتحرك الماوس. ستعمل فقط مع الحركة الأفقية.

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

وأخيرًا ، وظيفة المعالج لحدث "زر التحرير" أو فقدان نقطة اللمس على الأجهزة المحمولة. يقوم بحذف جميع الأحداث التي تمت إضافتها مسبقًا ويترك شريط التمرير عند القيمة المحددة.

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

وبالطبع ، أنماط CSS لشريط التمرير الخاص بنا

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

عرض نسخة العمل من هذا شريط التمرير هنا .

يمكن تنزيل جميع الملفات من جيثب .

استخدام ممتعة والعمل السهل!