I have encountered an issue with setting minimum values for 4 things. All 4 things are supposed to have the same minimum value as the first thing, but when moving the slider, everything goes back to normal and works fine. Where could the problem be originating from?
Link: 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>