jQuery UI滑块固定值

我试图让jQuery滑块设置要滑动到的值，而不是最小值和最大值之间的每个数字

我想要的是“0，25，50，100，250，500”，因为人们也能滑动的唯一数量，但无法计算它是如何完成的。把它们放在“价值”部分似乎没有任何作用

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

$（函数（）{
$（“#滑块范围”）。滑块({
范围：对，
分:0,，
最高：500，
值：[100250]，
幻灯片：功能（事件、用户界面）{
$（“#amount”）.val（'Miles:'+ui.values[0]+'-'+ui.values[1]）；
}
});
$（“#金额”）.val（'英里：'+$（“#滑块范围”）.slider（“值”，0）+'-'+$（“#滑块范围”）.slider（“值”，1））；
});

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

我将提供一个可能值的数组，将滑块更改为映射该数组的范围，然后将表示位更改为从适当的数组元素读取

范围滑块：多拇指版本

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

---

)

最小html:

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

---

+1这项工作非常有效！如果希望这些值之间有固定的可视宽度，这非常好。现在，我只需要扩展cguisliderinput，就可以在Yii中实现这种行为；）@很棒的骆驼，你的版本在一个滑块上产生2个拇指，所以你可以拖动两个。我对它进行了修改，以防你只需要一个拇指就可以拖动。我会将它添加到您的答案中，以防有人需要单一版本，如果您认为它不属于这里，请将其删除。在第二个示例中：

范围滑块：单一拇指版本

最小值应为

0

。映射值的好方法。缺点是你会丢失捕捉点之间相对距离的视觉反馈（从25到50的滑块距离与从100到250的滑块距离相同），但对于我来说，这很有效，谢谢。我知道这个老问题，但这仍然很有效。但是，如何设置初始值？无论我在初始化过程中设置了哪个值，滑块始终是整个路径的40%。