Zestaw niestandardowego zasięgu/zmiennej z suwakiem JQuery UI

Question

Chciałem sprawdzić, czy mogę utworzyć niestandardowy zestaw danych do użycia z jQuery UI Slider. Pracuję nad stroną o rozmiarach ubiorów w zakresie: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 16 W, 18 W, 20 W]

Problem, który pojawia się tuż po 18, kiedy przechodzi do "szerokich" rozmiarów, które są nieco wyjątkowe.

Przed dodałem w 16W, 18W i na rozmiarach, stworzyłem suwak jest wykonywana przy użyciu następującego kodu:

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

Ostatnim argumentem tej funkcji zmienia wartość tekstową, gdy suwak jest zmieniana .

Czy ktoś wie, jak dodać o 16W, 18W itd. Na końcu tej listy?

Dzięki!

Answer 1

o niestandardowych rozmiarach, można użyć innego tablicę dla etykiet:

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

Teraz, aby dodać lub usunąć rozmiary, wystarczy zmodyfikować tablicę 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); 
    } 
}); 

----- lub ------

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