2017-08-17 66 views
0

我为4件事物设置了一个最小值,并且遇到了一个问题。所有4件事物都有第一件事的最小值。当我们移动滑块时,一切都恢复正常并且正常工作。哪里有问题?最小值不起作用

链接:https://jsfiddle.net/57nv61a1/

$('#field2').rangeslider({ 
 
     polyfill:false, 
 
     onInit:function(){ 
 
     
 
      $('#input2').val($('input[type="range"]').val()); 
 
     }, 
 
     onSlide:function(position, value){ 
 
      $('.content #input2').val(value); 
 
     }, 
 
     onSlideEnd:function(position, value){ 
 
     } 
 
    }); 
 
    // Change the value of input field when slider changes 
 
    $('#field2').on('input', function() { 
 
     $('#input2').val(this.value); 
 
     console.log('$'+$('#input2').val()); 
 
    }); 
 
    // Change the value of slider field when input changes 
 
    $('#input2').on('input', function() { 
 
     if (this.value.length == 0) $('#field2').val(0).change(); 
 

 
     $('#field2').val(this.value).change(); 
 
    });
<label for="medical-expenses">Medical Expenses</label> 
 
<span class="label1">$ <input type="number" id="input1" min="1" max="10000"></input></span> 
 
<input id="field1" name="field1" type="range" min="1" max="10000" value="0" data-rangeslider> 
 

 
<label for="vehicle-damage">Vehicle Damage</label> 
 
<span class="label2">$ <input type="number" id="input2" min="2" max="10000"></input></span> 
 
<input id="field2" name="field2" type="range" min="2" max="10000" value="0" data-rangeslider>

+0

你能解释更详细一点请以便我们更好的 –

+0

帮助你,你重复相同的代码4次,因为你有4个滑块。如果你有100个滑块,我不认为你想复制/粘贴100次相同的代码。 –

+0

@JeremyThille我需要只有两个滑块 – Beerks

回答

1

这条线:

$('#input4').val($('input[type="range"]').val()); 

选择所有input[type="range"],取第一个的值,并将其分配给$('#input4')

既然你复制/粘贴相同的代码4次,每次输入获取具有相同的价值,这是1

$('#input1').val($('input[type="range"]').val()); 
$('#input2').val($('input[type="range"]').val()); 
$('#input3').val($('input[type="range"]').val()); 
$('#input4').val($('input[type="range"]').val()); 

你开始移动滑块,然后回到起点后,该值初始化变化,然后,相应的最小值(1,2,3,4)适用。

的解决方案,虽然还是很不雅观,将手动分配正确的初始值:

$('#input1').val(1); 
$('#input2').val(2); 
$('#input3').val(3); 
$('#input4').val(4);