jQuery UI滑块固定值

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

我想要“0,25,50,100,250,500”作为人们可以滑动的唯一数量，但无法弄清楚它是如何完成的。 将它们放在“值”部分似乎没有做任何事情。

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

Answer 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, 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：