गैर-रैखिक/घातीय/लॉगरिदमिक चरणों के साथ JQuery UI स्लाइडर

Question

मैं जावास्क्रिप्ट और JQuery के लिए नया हूं, मैं मूल्य सीमा ड्रॉपडाउन बक्से को बदलने के लिए JQuery UI स्लाइडर का उपयोग करने की कोशिश कर रहा हूं (न्यूनतम मूल्य के लिए एक, अधिकतम मूल्य के लिए दूसरा) मेरी साइटों में से एक।

$(function() { 
var slider = $("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 2500000, 
    step: 1000, 
    values: [ 0, 2500000 ], 
    slide: function(event, ui) { 
      $("#amount").val("RM " + commafy(ui.values[ 0 ]) + " to RM " + commafy(ui.values[ 1 ])); 
    } 
}); 
    $("#amount").val("RM " + commafy($("#slider-range").slider("values", 0)) + 
" to RM " + commafy($("#slider-range").slider("values", 1))); 
    function commafy(val) { 
    return String(val).split("").reverse().join("") 
         .replace(/(.{3}\B)/g, "$1,") 
         .split("").reverse().join(""); 
} 
}); 

मूल्य सीमा 0 से 2500.000 के लिए है:

यहाँ मेरे वर्तमान कोड है। परीक्षण के बाद मुझे पता चला कि यूएक्स बेहतर होगा अगर स्लाइडर गैर-रैखिक रूप से स्केल करता है क्योंकि मेरी साइट पर अधिकांश उपयोगकर्ता 25,000 से 200,000 रेंज के बीच खोज करेंगे।

स्लाइडर का एक बहुत ही मिनट हिस्सा 0 से 25000 रेंज दिखाएगा, इसमें से 70% 25,000 से 200,000 दिखाएंगे जबकि शेष 200,000 और उससे ऊपर दिखाना चाहिए। मैं यह तय मूल्यों पर ले नहीं करना चाहती लेकिन चरणों 1000

मैं दो इस साइट पर समाधान पाया हो गया है:
1) Logarithmic slider < - समाधान JQuery UI का उपयोग पर आधारित नहीं था स्लाइडर इसलिए मुझे वास्तव में नहीं पता कि मेरे कोड में कैसे आवेदन करें।
2) JQuery Slider, how to make "step" size change < - समाधान के हिस्से के रूप में लड़के ने सत्य और मूल्यों का उपयोग शुरू करने के बाद मैं इसके सिर या पूंछ नहीं बना सकता। मैंने अपने कोड पर आवेदन करने की कोशिश की, स्लाइडर ठीक काम करता है (हालांकि मेरे स्वाद के लिए अंत में बहुत तेजी से स्थानांतरित हो गया) लेकिन पाठ नहीं दिखाया गया।

कोई विचार?

Answer 1

आप इस दृष्टिकोण को ले सकते हैं: मानों की गणना करने से स्लाइडर रेंज 0-100 का उपयोग करें।

<div id="slider-range"></div> 
<input id="amount" type="text" size="40" /> 

और जे एस:

var slider = $("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 100, 
    step: 1, 
    values: [10, 80], 
    slide: function (event, ui) { 
     $("#amount").val("RM " + commafy(ui.values[0]) + " to RM " + commafy(ui.values[1])); 
    } 
}); 
$("#amount").val("RM " + commafy($("#slider-range").slider("values", 0)) + 
    " to RM " + commafy($("#slider-range").slider("values", 1))); 

function commafy(val) { 
    /* Total range 0 - 2,500,000 */ 
    /* 70% from 25,000 to 200,000, what have left (2,325,000) share left (25,000) and right (2,300,000) */ 
    /* So, final dividing */ 
    var toPresent = 0; 
    if (val < 10) { 
     toPresent = (val/10) * 25000; 
    } else if (val <= 80) { 
     toPresent = 25000 + (val - 10)/70 * 175000; 
    } else { 
     toPresent = 200000 + (val - 80)/20 * 2300000; 
    }; 
    return String(toPresent).split("").reverse().join("") 
     .replace(/(.{3}\B)/g, "$1,") 
     .split("").reverse().join(""); 
} 

उदाहरण Fiddle HTML के साथ।