jQuery UI slider fixed values

Question

I\'m trying to get the jQuery slider to have set values to slide to as opposed to every number between the min & max amounts.

I\'m wanting \"0, 25, 50, 100, 250

Answer 1

The values initializer is for providing the starting positions of multiple-thumb sliders.

I would provide an array of the possible values, change the slider to map over the range of that array, and then change your presentation bit to read from the appropriate array element.

range slider: multiple-thumb version

$(function() {
    var valMap = [0, 25, 50, 100, 250, 500];
    $("#slider-range").slider({
        min: 0,
        max: valMap.length - 1,
        values: [0, 1],
        slide: function(event, ui) {                        
            $("#amount").val('Miles: ' + valMap[ui.values[0]] + ' - ' + valMap[ui.values[1]]);                
        }       
    });
    $("#amount").val('Miles: ' + valMap[$("#slider-range").slider("values", 0)] + ' - ' + valMap[$("#slider-range").slider("values", 1)]);
});

range slider: single-thumb version

---

$(function() {
    var valMap = [0, 40, 50, 63, 90, 110, 125, 140, 160, 225, 250];
    $("#slider-range").slider({
        min: 1,
        max: valMap.length - 1,
        value: 0,
        slide: function(event, ui) {                        
            $("#amount").val(valMap[ui.value]);                
        }       
    });
    //$("#amount").val(valMap[ui.value]);
})

;

minimum html:

<input type="text" id="amount" value="40" />
<div id="slider-range"></div>