कस्टम रेंज/jQuery यूआई स्लाइडर के साथ चर सेट

Question

मैं अगर मैं एक कस्टम डेटा jQuery UI Slider के साथ उपयोग करने के लिए सेट कर सकता है देखना चाहता था। मैं ऐसी साइट पर काम कर रहा हूं जिसमें ड्रेस आकार हैं जो [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 16W, 18W, 20W]

जिस मुद्दे को मैं 18 साल के बाद ठीक कर रहा हूं, जब यह "चौड़े" आकारों तक कूदता है जो थोड़ा अनोखा होता है।

$("#slider-size .slider").slider({ 
    min: 0, 
    max: 18, 
    step: 2, 
    slide: function(event, ui) { 
    $(".rsize").text(ui.value); 
    } 
}); 

कि समारोह में अंतिम तर्क किसी पाठ मान बदल जाता है जब स्लाइडर बदल गई है:

इससे पहले कि मैं 16W, 18W में जोड़ा, और आकार पर, मैं एक काम कर स्लाइडर निम्नलिखित कोड का उपयोग कर बनाई ।

क्या कोई इस सूची के अंत में 16W, 18W, आदि में जोड़ने के बारे में जानता है?

धन्यवाद!

Answer 1

कस्टम आकार के लिए, आप अपने लेबल के लिए एक और सरणी का उपयोग हो सकता है:

var sizes = ["0","2","4","6","8","10","12","14","16","18","16W","18W","20W"]; 
$("#slider-size .slider").slider({ 
    min: 0, 
    max: sizes.length - 1, 
    step: 1, 
    slide: function(event, ui) { 
    $(".rsize").text(sizes[ui.value]); 
    } 
}); 

अब, आकार जोड़ने या हटाने के लिए, बस sizes सरणी को संशोधित करें।

Answer 2

demo

$("#slider-size .slider").slider({ 
    min: 0, 
    max: 24, // max is 24 
    step: 2, 
    slide: function(event, ui) { 
    var s = ui.value; 
    switch(ui.value) { 
     case 20: 
     s = '16W'; 
     break; 
     case 22: 
     s = '18W'; 
     break; 
     case 24: 
     s = '12W'; 
     break; 
    } 
    $(".rsize").text(s); 
    } 
}); 

----- या ------

demo

$("#slider-size .slider").slider({ 
    min: 0, 
    max: 24, // max is 24 
    step: 2, 
    slide: function(event, ui) { 
     $(".rsize").text((ui.value >18)?(ui.value-4)+'W':ui.value); 
    } 
});​