Làm cách nào để làm cho thanh trượt jQuery UI snap thành giá trị được xác định trước?

Question

Tôi có một thanh trượt trong giao diện người dùng jQuery nơi tôi có một số giá trị được xác định trước mà người dùng có thể chọn. Tuy nhiên, ngay bây giờ, nó chỉ đi từ 1-60 và không sử dụng các giá trị của tôi. Tôi có những con số sau đây: 1,3,5,15,30,60

Đây là mã của tôi:

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

Làm thế nào tôi có thể làm cho con trượt snap vào giá trị của tôi trong valMap?

Answer 1

Tại sao không làm:

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

Answer 2

Tôi nghĩ rằng đó là những gì bạn muốn, có một thử các mã dưới đây:

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