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!