Conjunto de rango/variable personalizado con el control deslizante de la jQuery UI

Question

Quería ver si podía crear un conjunto de datos personalizado para usar con jQuery UI Slider. Estoy trabajando en un sitio que tiene tamaños de vestido que vienen en el rango de: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 16W, 18W, 20W]

El problema que estoy teniendo surge justo después de los 18, cuando salta a tamaños "anchos" que son un tanto únicos.

Antes he añadido en el 16W, 18W, y en tamaños, he creado un deslizador de trabajo utilizando el siguiente código:

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

El último argumento de que la función cambia un valor de texto cuando se cambia el deslizador .

¿Alguien sabe cómo agregarle 16W, 18W, etc. al final de esta lista?

Gracias!

Answer 1

para tamaños personalizados, puede utilizar otra matriz para sus etiquetas:

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

Ahora, para agregar o eliminar tamaños, simplemente modifique la matriz 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); 
    } 
}); 

----- ------ o

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