jQuery UI 滑块固定值 [英] jQuery UI slider fixed values

问题描述

我试图让 jQuery 滑块设置滑动到的值，而不是 min 和; 之间的每个数字.最大金额.

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.

我想要0、25、50、100、250、500"作为人们也可以滑动的唯一数量，但无法弄清楚它是如何完成的.将它们放在值"部分似乎没有任何作用.

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>

推荐答案

values initializer 用于提供多拇指滑块的起始位置.

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.

范围滑块:多拇指版本

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

范围滑块:单拇指版本

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

;

最小 html:

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

这篇关于jQuery UI 滑块固定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！