Javascript 如何使jQuery UI滑块捕捉到预定义的值？

我在jQueryUI中有一个滑块，其中有一些预定义的值供用户选择。然而，现在，它只是从1到60，不使用我的值。我有以下数字： 1,3,5,15,30,60

这是我的代码：

$(document).ready(function(){
    var valMap = [1,3,5,15,30,60];
    $("#resolution-slider").slider({
        min: 1,
        max: 60,
        values: [2],
        slide: function(event, ui) {                        
            $("#resolution").val(ui.values[0]);                
            $(".resolution-preview").html(ui.values[0]);                
        }       
    });
});

---

如何使滑块与valMap中的值对齐？

我想这就是您想要的，请尝试以下代码：

<div id="slide"></div>

var valMap = [1,3,5,15,30,60];

$("#slide").slider({
  max: 60,
  min: 1,
  stop: function(event, ui) {
     console.log(ui.value);
  },
  slide: function(event, ui) {
    // 1,3,5,15,30,60
    return $.inArray(ui.value, valMap) != -1;
  }  
});

var valMap=[1,3,5,15,30,60]；
$（“#幻灯片”）.滑块({
最高：60，
民:1,，
停止：功能（事件、用户界面）{
console.log（ui.value）；
},
幻灯片：功能（事件、用户界面）{
// 1,3,5,15,30,60
返回$.inArray（ui.value，valMap）！=-1；
}  
});

为什么不：

$(document).ready(function(){
    var valMap = [1,3,5,15,30,60];
    $("#resolution-slider").slider({
      max: valMap.length - 1, // Set "max" attribute to array length
      min: 0,
      values: [2],
      slide: function(event, ui) {
        $("#resolution").val(valMap[ui.values[0]]); // Fetch selected value from array               
        $(".resolution-preview").html(valMap[ui.values[0]]);
      }  
    });
});

---

没有内置的功能来执行此操作，但是您可以覆盖

幻灯片

事件以捕捉到您的值。请参阅此问题中的公认答案：