jQuery UI 滑块固定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/857075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI slider fixed values
提问by Carpy
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.
我试图让 jQuery 滑块设置滑动到的值，而不是最小和最大数量之间的每个数字。
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.
我想要“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>
回答by great_llama
The values initializer is for providing the starting positions of multiple-thumb sliders.
values 初始值设定项用于提供多拇指滑块的起始位置。
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)]);
});
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:
最小html：
<input type="text" id="amount" value="40" />
<div id="slider-range"></div>
