Custom Range/Variable Set with jQuery UI Slider

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, 12, 14, 16, 18, 16W, 18W, 20W ]

The issue I'm having arises right after 18, when it jumps to "wide" sizes that are a bit unique.

Before I added in the 16W, 18W, and on sizes, I created a working slider using the following code:

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

The last argument in that function changes a text value when the slider is changed.

Does anyone know how to go about adding in the 16W, 18W, etc to the end of this list?

Thanks!

Solution

for custom sizes, you may use another array for your labels:

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

Now, to add or remove sizes, just modify the sizes array.