twitter-bootstrap 如何从范围滑块中获取多个值 - bootstrap-slider.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17200512/
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
How to get multiple values from range slider - bootstrap-slider.js
提问by Grant
I am using bootstrap-slider.js - http://www.eyecon.ro/bootstrap-slider/to give me range slider functionality. I have 9 sliders on one page and am getting the value only from the first slider.
我正在使用 bootstrap-slider.js - http://www.eyecon.ro/bootstrap-slider/给我范围滑块功能。我在一页上有 9 个滑块，并且仅从第一个滑块获取值。
How do I get the value for the other sliders?
我如何获得其他滑块的值？
<input type="text" class="sliderMaster slider-horizontal" id="sl9" name="q12" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
<input type="text" class="sliderMaster slider-horizontal" id="sl2" name="q2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
<input type="text" class="sliderMaster slider-horizontal" id="sl3" name="q3" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
$(function(){
$('#sl1').slider({
formater: function(value) {
return 'Current value: '+value;
}
});
$('#sl2').slider({
formater: function(value) {
return 'Current value: '+value;
}
});
$('#sl3').slider({
formater: function(value) {
return 'Current value: '+value;
}
});
});
回答by mccannf
You can get the values like so:
你可以得到这样的值：
console.log("Slider 1 = "+$("#sl1").data('slider').getValue());
console.log("Slider 2 = "+$("#sl2").data('slider').getValue());
console.log("Slider 3 = "+$("#sl3").data('slider').getValue());
Edit
编辑
So to clarify - there does appear to be a problem that the slider is not actually updating the value of the underlying input. And when that input is posted via a form submit to the server, this causes a problem.
所以澄清一下 - 似乎确实存在一个问题，即滑块实际上并未更新基础输入的值。当该输入通过表单提交到服务器时，这会导致问题。
You could try adding an event to explicitly update the input when a slider changes, like so:
您可以尝试添加一个事件以在滑块更改时显式更新输入，如下所示：
$(function(){
$('#sl1').slider({
formater: function(value) {
return 'Current value: '+value;
}
}).on('slideStop', function(ev){
$(this).val($(this).data('slider').getValue());
});
$('#sl2').slider({
formater: function(value) {
return 'Current value: '+value;
}
}).on('slideStop', function(ev){
$(this).val($(this).data('slider').getValue());
});
$('#sl3').slider({
formater: function(value) {
return 'Current value: '+value;
}
}).on('slideStop', function(ev){
$(this).val($(this).data('slider').getValue());
});
});
and in each input set valueto the same value as data-slider-valueas this will be the default value i.e.
并且在每个输入中设置value为相同的值，data-slider-value因为这将是默认值，即
<input type="text" class="sliderMaster slider-horizontal" id="sl2" name="q2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
