Custom Range/Variable Set with jQuery UI Slider

Question

I wanted to see if I could make a custom data set to use with jQuery UI Slider. I\'m working on a site that has dress sizes that come in the range of: [ 0, 2, 4, 6, 8, 10,

Answer 1

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

----- or ------

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