🛡️ ❎ 🗾 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>

स्क्रीन पर यह इस तरह दिखता है

स्लाइडर के साथ स्लाइडर स्वयं "स्लाइडर" वर्ग के साथ एक ब्लॉक में होता है जिसमें 2 और ब्लॉक होते हैं: न्यूनतम मूल्य स्लाइडर और अधिकतम रेंज मूल्य स्लाइडर।
वे दो घटनाओं का वर्णन करते हैं:

onMouseDown - जब हम माउस से स्लाइडर को पकड़ते हैं तो ट्रिगर हो जाता है;
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); }

और, ज़ाहिर है, हमारे स्लाइडर के लिए सीएसएस शैलियों

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

इस स्लाइडर का कार्य संस्करण यहां देखें ।

सभी फाइलें GitHub से डाउनलोड की जा सकती हैं ।

आनंददायक उपयोग और आसान काम!

JQuery का उपयोग किए बिना फ़िल्टर के लिए मान स्लाइडर की एक श्रृंखला बनाना

More articles: