Wie kann ich jQuery UI Schieberegler auf vordefinierte Werte einrasten lassen?

Question

Ich habe einen Schieberegler in jQuery UI, wo ich einige vordefinierte Werte, die der Benutzer wählen können. Doch im Moment, es geht nur von 1-60 und nicht mit meinen Werten. Ich habe die folgenden Zahlen: 1,3,5,15,30,60

Dies ist mein Code:

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

Wie kann ich den Schieberegler an meinen Werten in valMap einrasten lassen?

Answer 1

Warum nicht tun:

$(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

Ich denke, das ist, was Sie wollen, versuchen Sie es mit den Codes unten:

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