How do I make jQuery UI slider snap to predefined values?

javascript, jquery, jquery-ui

Solution

Why not do:

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

Problem

I have a slider in jQuery UI where I have some predefined values that the user can choose. However, right now, it just goes from 1-60 and not using my values. I have the following numbers: 1,3,5,15,30,60 This is my 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]); } }); }); ``` How can I make the slider snap to my values in valMap?

Original source

Related problems