使用jQuery UI Slider自定义范围/变量集

Question

我想看看我是否可以创建一个自定义数据集来与jQuery UI Slider一起使用.我正在一个服装尺寸范围为:[0,2,4,6,8,10,12,14,16,18,16W,18W,20W]的网站上工作

我遇到的问题是在18岁之后,当它跳到"宽"的尺寸时有点独特.

在我添加16W,18W和on尺寸之前,我使用以下代码创建了一个工作滑块:

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

更改滑块时,该函数中的最后一个参数会更改文本值.

有谁知道如何在这个列表的末尾添加16W,18W等？

谢谢!

Answer 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数组即可.

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