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, 500" as the only amounts people can slide too but can't work out how it's done. Putting them in the "Values" part doesn't seem to do anything.

<script type="text/javascript">
$(function() {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 500,
        values: [100, 250],
        slide: function(event, ui) {
            $("#amount").val('Miles: ' + ui.values[0] + ' - ' + ui.values[1]);
        }
    });
    $("#amount").val('Miles: ' + $("#slider-range").slider("values", 0) + ' - ' + $("#slider-range").slider("values", 1));
});
</script>

great_llama great_llama · Accepted Answer · 2009-05-13T12:26:17

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

enter image description here

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>

enter image description here

jQuery UI slider fixed values

1 Answers