Пользовательский диапазон/переменная с jQuery UI Slider

Мне хотелось узнать, могу ли я создать пользовательский набор данных для использования jQuery UI Slider. Я работаю над сайтом с размерами одежды, которые входят в диапазон: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 16W, 18W, 20W]

Проблема, с которой я столкнулась, возникает сразу после 18, когда она перескакивает на "широкие" размеры, которые немного уникальны.

До того, как я добавил 16W, 18W и по размерам, я создал рабочий слайдер, используя следующий код:

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

Последний аргумент этой функции изменяет текстовое значение при изменении ползунка.

Кто-нибудь знает, как добавить в 16W, 18W и т.д. в конец этого списка?

Спасибо!

Ответ 1

для пользовательских размеров вы можете использовать другой массив для своих меток:

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

Теперь, чтобы добавить или удалить размеры, просто измените массив sizes.

Ответ 2

демонстрация

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

----- или ------

демонстрация

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