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>

score 41 · Accepted Answer · edited Sep 28 '13 at 15:04

41

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

edited Sep 28 '13 at 15:04

rmagnum2002

11,341
8
49
86

answered May 13 '09 at 12:26

great_llama

11,481
4
34
29

+1 This works marvelously! Great if you want the values to have a fixed visual amount of width between them. Now I only need to extend the CJuiSliderInput to implement this behaviour in Yii ;) – Tommy Bravo Aug 05 '11 at 09:19
2

@great_llama, your version generates 2 thumb on a slider, so you can drag both. I have modified it in case you need only one thumb to drag around. http://jsfiddle.net/8B4wY/2/. I'll add it to your answer in case someone needs exactly the single version, if you think this does not belong here please remove it. – rmagnum2002 Sep 28 '13 at 15:01
In the second example: `range slider: single-thumb version` the `min` value should be `0`. – kolobok Nov 04 '13 at 08:50
Nice solution for mapping the values. Downside is that you lose the visual feedback of relative distance between snap points (same slider distance from 25 to 50 as from 100 to 250), but for my case this worked well, thanks. – nothingisnecessary Jan 19 '16 at 20:42
Old question I know, but this still works great. How do you set the initial value however? No matter which value I set during initialisation, the slider is always about 40% of the way across. – Simon Mar 17 '16 at 21:43

jQuery UI slider fixed values

1 Answers1

Linked