क्या गैर-समान रूप से विभाजित मूल्यों के साथ काम कर रहे एक jquery स्लाइडर का प्लगइन या उदाहरण है?

Question

मैं एक वेब रूप है, जो ब्राउज़रों में अच्छी तरह से नीचा कि जावास्क्रिप्ट है शैलियों का समर्थन नहीं करते के लिए एक स्लाइडर पैदा करने के लिए दो उत्कृष्ट jQuery प्लगइन्स पाया है बंद आदि कर दिया

पहले Jquery.UI संस्करण है: http://ui.jquery.com/demos/slider/#steps

दूसरा स्लाइडर के लिए एक चुनिंदा तत्व है: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

हालांकि मुझे एक स्लाइडर बनाने की आवश्यकता है जो स्लाइडर को बराबर भागों में विभाजित न करे।

उदाहरण के लिए मान लीजिए कि मैं नंबर की निम्न श्रेणी डालते हैं:

800,1000,1100,1200,1300,1400,1500

मैं स्लाइडर चाहते हैं के बीच एक अच्छा बड़ा अंतर है करने के लिए 800 और 1000 1100-1500

के बीच तो छोटे अंतराल तो स्लाइडर एक छोटे से इस प्रकार दिखाई देगा:

800 ---- 1000--1100--1200--1300--1400--1500

अधिमानतः मैं इसे एक ड्रॉप डाउन पर अपग्रेड करना चाहता हूं, इसलिए सवाल यह है कि किसी को भी ऐसे प्लगइन के बारे में पता है जो इसका समर्थन करता है या इसे प्राप्त करने के सर्वोत्तम तरीके के लिए कोई सिफारिश है, फिलामेंट समूह प्लगइन को अपना खुद का रोल करें।

अद्यतन: फिलामेंट समूह के स्लाइडर के साथ हैकिंग कर रहा है और यह वैसे भी JQuery UI के स्लाइडर के माध्यम से हैंडल लागू करता है। तो ऐसा लगता है कि JQuery.UI को संशोधित करना एकमात्र विकल्प उपलब्ध है। यह देखने के लिए कोड में खुदाई होगी कि क्या मुझे आवश्यक बिट मिल सकता है जिसे बदलने की जरूरत है। अगर इस बीच किसी के पास कोई विचार है !!!

Answer 1

आप स्लाइड घटना में hooking (प्रभावी रूप से यह अधिभावी) द्वारा jQuery के स्लाइडर का प्रयोग करके यह कर सकता है ... इस तरह कुछ:

$(function() { 
    var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100]; 
    var slider = $("#slider").slider({ 
     slide: function(event, ui) { 
      var includeLeft = event.keyCode != $.ui.keyCode.RIGHT; 
      var includeRight = event.keyCode != $.ui.keyCode.LEFT; 
      slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value)); 
      return false; 
     } 
    }); 
    function findNearest(includeLeft, includeRight, value) { 
     var nearest = null; 
     var diff = null; 
     for (var i = 0; i < values.length; i++) { 
      if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) { 
       var newDiff = Math.abs(value - values[i]); 
       if (diff == null || newDiff < diff) { 
        nearest = values[i]; 
        diff = newDiff; 
       } 
      } 
     } 
     return nearest; 
    } 
}); 

के लिए आप क्या वर्णन ... मैं इसे परीक्षण किया है काम करना चाहिए बाएं/दाएं/घर/अंत कुंजी का उपयोग करके माउस & के साथ खींचने के लिए (जाहिर है कि यदि आप लंबवत स्लाइडर चाहते हैं तो आपको बाएं/दाएं को ऊपर/नीचे बदलना होगा)।

कुछ नोट:

• जाहिर मूल्यों सरणी जो भी कदम आप अपने उद्देश्यों के लिए करना चाहते हैं।
• इसके अलावा, उपर्युक्त कोड "स्लाइडर" की एक आईडी के साथ काम करने के लिए एक div मानता है।
• यह शायद अजीब तरीके से काम करेगा यदि आपके न्यूनतम/अधिकतम मान स्लाइडर के लिए आपके न्यूनतम/अधिकतम मानों के समान नहीं हैं (मैं केवल "न्यूनतम: मान [0], अधिकतम: मानों [मान। लम्बाई -1) का उपयोग करने का सुझाव दूंगा ] "स्लाइडर & पर आपके न्यूनतम/अधिकतम विकल्प के रूप में आपको हमेशा सुरक्षित रहना चाहिए)।
• जाहिर है कि यह विकल्प वर्तमान में एक ड्रॉप डाउन सूची में गिरावट नहीं करेगा, लेकिन यह करना बहुत आसान होगा ... सामान्य ड्रॉप डाउन सूची (डिफ़ॉल्ट स्थिति में कोई जावास्क्रिप्ट नहीं है) के रूप में अपने विकल्पों को प्रस्तुत करें & का उपयोग करें ड्रॉप डाउन सूची को छिपाने के लिए jquery और विकल्पों के आधार पर अपनी मान सरणी भी बनाएं। फिर आप उपरोक्त कोड में स्लाइडर को अपडेट करते समय उसी समय (छुपी हुई) ड्रॉप डाउन सूची को अपडेट कर सकते हैं, ताकि जब आपकी फॉर्म पोस्ट हो, तो ड्रॉप डाउन सूची में सही मान चुना जाएगा।

आशा है कि मदद करता है।

Answer 2

ES6 में आप का पालन करते हुए अपने निकटतम नंबर मिल सकता है ..

function findClosest(array, value) { 
 
    return array.sort((a, b) => Math.abs(value - a) - Math.abs(value - b))[0]; 
 
} 
 

 
let array = [1, 5, 10, 28, 21]; 
 
let v = 4; 
 
let number = findClosest(array, v); // -> 5