如何从范围滑块中获取多个值 - bootstrap-slider.js

Question

我正在使用bootstrap-slider.js - http://www.eyecon.ro/bootstrap-slider/ 给我范围滑块功能.我在一个页面上有9个滑块,只能从第一个滑块获取值.

如何获得其他滑块的值？

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

Answer 1

您可以像这样获取值:

console.log("Slider 1 = "+$("#sl1").data('slider').getValue());
console.log("Slider 2 = "+$("#sl2").data('slider').getValue());
console.log("Slider 3 = "+$("#sl3").data('slider').getValue());    

小提琴这里.

编辑

所以要澄清一下 - 确实存在滑块实际上没有更新底层输入值的问题.当通过表单提交将该输入发布到服务器时,这会导致问题.

您可以尝试添加事件以在滑块更改时显式更新输入,如下所示:

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

并且在每个输入设置value为相同的值时data-slider-value将是默认值ie

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