Question

我有这段代码。我有3个不同值的bootstrap滑块。我想让输入框显示slider1 + slider2 + slider3的值，此时它只显示输入框中第一个滑块的值。任何帮助表示赞赏。 http://jsfiddle.net/4c2m3cup/

<div class="wrapper">
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
    <hr />

<input id="ex2" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
     <hr />
    <input id="ex3" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />

     <hr />

    <input type="text" class="form-control" id="inputValue" value="0" />


</div>

和

var minSliderValue = $("#ex1").data("slider-min");
var maxSliderValue = $("#ex1").data("slider-max");

$('#ex1').slider({
    value : 0,
    formatter: function(value) {
        return 'First Number: ' + value;
    }
});

$('#ex2').slider({
    value : 0,
    formatter: function(value) {
        return 'Second number: ' + value;
    }
});

$('#ex3').slider({
    value : 0,
    formatter: function(value) {
        return 'Third Number : ' + value;
    }
});

// If You want to change input text using slider handler
$('#ex1').on('slide', function(slider){
    $("#inputValue").val(slider.value);
});

// If you want to change slider using input text
$("#inputValue").on("keyup", function() {
    var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
    this.value = val > maxSliderValue ? maxSliderValue : val;
    $('#ex1','ex2','ex3').slider('setValue', val);
});

Answer 1

替换此部分

// If You want to change input text using slider handler
$('#ex1').on('slide', function(slider){
    $("#inputValue").val(slider.value);
});

用这个

//Set up an event listener for all sliders calling the same function
$('#ex1, #ex2, #ex3').on('slide', function(){
    //Get the corresponding values of the sliders
    var ram = $("#ex1").val();
    var space = $("#ex2").val();
    var cores = $("#ex3").val();

    //Set the value of the input box
    $("#inputValue").val(ram + " " + space + " " + cores);
});

Answer 2

您需要计算每个滑块事件slide的值，并从value滑块获取all three。这是jsfiddle

<div class="wrapper">
<input class="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
    <hr />

<input class="slider" id="ex2" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
     <hr />
    <input  class="slider" id="ex3" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />

     <hr />

    <input type="text" class="form-control" id="inputValue" value="0" />


</div>

和javascript

var minSliderValue = $("#ex1").data("slider-min");
var maxSliderValue = $("#ex1").data("slider-max");

$('#ex1').slider({
    value : 0,
    formatter: function(value) {
        return 'RAM: ' + value + 'GB';
    }
});

$('#ex2').slider({
    value : 0,
    formatter: function(value) {
        return 'Disk Space: ' + value + 'GB';
    }
});

$('#ex3').slider({
    value : 0,
    formatter: function(value) {
        return 'CPU : ' + value + ' Cores';
    }
});

// If You want to change input text using slider handler
$('.slider').on('slide', function(slider){

  var val1 = $("#ex1").val();
  var val2 = $("#ex2").val();
  var val3 = $("#ex3").val();
  $("#inputValue").val(parseInt(val1)+ parseInt(val2)+ parseInt(val3));

});

// If you want to change slider using input text
$("#inputValue").on("keyup", function() {
    var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
    this.value = val > maxSliderValue ? maxSliderValue : val;
    $('#ex1','ex2','ex3').slider('setValue', val);
});

Answer 3

试试这个

$('#ex1, #ex2, #ex3').on('slide', function(slider){
 var val1 = parseInt($('#ex1').val());
 var val2 = parseInt($('#ex2').val());
 var val3 = parseInt($('#ex3').val());
    $("#inputValue").val("RAM="+ val1 + "GB, Disk=" +val2 + "GB, Core="+val3);
});

http://jsfiddle.net/umxhhqy4/

Bootstrap滑块和值

3 个答案: