如何从范围滑块中获取多个值 - bootstrap-slider.js [英] How to get multiple values from range slider - bootstrap-slider.js

问题描述

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

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.

如何获取其他滑块的值?

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

推荐答案

您可以获得如下值:

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

在这里小提琴.

编辑

所以澄清一下 - 似乎确实存在一个问题，即滑块实际上并未更新基础输入的值.当该输入通过表单提交到服务器时，这会导致问题.

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

并且在每个输入中将 value 设置为与 data-slider-value 相同的值，因为这将是默认值，即

and in each input set value to the same value as data-slider-value as this will be the default value i.e.

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

这篇关于如何从范围滑块中获取多个值 - bootstrap-slider.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！