Minimum value not working

Question

I have set a minimum value for 4 things and I encountered a problem. All 4 things have a minimum value of the first thing. When we move the slider, then everything goes back to normal and works fine. Where is the problem?

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>

Answer 1

This line :

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

selects all the input[type="range"], takes the value of the first one, and assigns it to $('#input4').

Since you copy/pasted the same code 4 times, every input gets initialized with the same value, which is 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());

After you start moving the sliders and then back to the beginning, the value changes, and then, the respective minimum values (1,2,3,4) apply.

The solution, although still very inelegant, would be to manually assign correct initial values :

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