bootstrap - Rango personalizado/conjunto de variables con jQuery UI Slider

slider js

Question

Quería ver si podía crear un conjunto de datos personalizado para usar con el control deslizante de jQuery UI . Estoy trabajando en un sitio que tiene tamaños de vestidos que se encuentran 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 de agregar en el 16W, 18W y en los tamaños, creé un control deslizante que funciona con 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 en esa función cambia un valor de texto cuando se cambia el control deslizante.

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

¡Gracias!

Answer 1

manifestación

$("#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 ------

manifestación

$("#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);
  }
});​

Answer 2

para tamaños personalizados, puede usar 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 de sizes .