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>

推荐答案

值初始值设定项用于提供多拇指滑块的起始位置.

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屋！