code fix for multiple range slider inputs in Js

Question

i'm trying to add multiple slider range inputs to my web-page and i want that when i use a slider the value of its sibling input changes. But i find out that only the first slider works but not the others

<div class="form-group my-3 d-flex flex-column">
                                    <div class="d-flex justify-content-between align-items-center simulateur mb-3">               
                                        <label for="formGroupExampleInput" class="important">Revenus nets/mois* <i class="fas fa-info-circle"></i></label>
                                        <input type="text" id="revenue" class="form-control"  placeholder="" value="0"> 
                                    </div>
                                    <input id="RVN" type="range" value="0" min="0" max="7000" step="100"/>
                                </div>


                                <div class="form-group my-3 d-flex flex-column">
                                    <div class="d-flex justify-content-between align-items-center simulateur mb-3">               
                                        <label for="formGroupExampleInput" class="important">Prêt en cours/mois* <i class="fas fa-info-circle"></i></label>
                                        <input type="text" id="pret" class="form-control"  placeholder="" value="0">    
                                    </div>
                                    <input id="val_pret" type="range" value="0" min="0" max="7000" step="100"/>
                                </div>


                                <div class="form-group my-3 d-flex flex-column">
                                    <div class="d-flex justify-content-between align-items-center simulateur mb-3">               
                                        <label for="formGroupExampleInput" class="important">Mensualité souhaitée* <i class="fas fa-info-circle"></i></label>
                                        <input type="text" id="mensualite" class="form-control"  placeholder="" value="0">  
                                    </div>
                                    <input id="val_mensualite" type="range" value="0" min="0" max="1000000000000" step="10000"/>
                                </div>


                                <div class="form-group my-3 d-flex flex-column">
                                    <div class="d-flex justify-content-between align-items-center simulateur mb-3" >                  
                                        <label for="formGroupExampleInput" class="important" disabled>Apport personnel <i class="fas fa-info-circle"></i></label>
                                        <input type="text" id="apport_personnel" class="form-control"  placeholder="" value="0">    
                                    </div>
                                    <input id="val_apport" type="range" value="0" min="0" max="7000" step="100" />
                                </div>


                                <div class="form-group my-3 d-flex flex-column">
                                    <div class="d-flex justify-content-between align-items-center simulateur mb-3">               
                                        <label for="formGroupExampleInput" class="important">Durée du prêt <i class="fas fa-info-circle"></i></label>
                                        <input type="text" id="duree" class="form-control"  placeholder="" value="0">   
                                    </div>
                                    <input id="val_duree" type="range" value="0" min="0" max="60" step="5"/>
                                </div>

and this is my js functions as it seems, i'm using the same way for all the functions but only the first one works?

var i= document.getElementById('RVN');
var o = document.getElementById('revenue');
    o.value = i.value;
i.addEventListener('input', function(){
    o.value = i.value;
}, false);


var p= document.getElementById('pret');
var vp = document.getElementById('val_pret');
    vp.value = p.value;
p.addEventListener('input', function(){
    vp.value = p.value;
}, false);


var m= document.getElementById('mensualite');
var vm = document.getElementById('val_mensualite');
    vm.value = m.value;
m.addEventListener('input', function(){
    vm.value = m.value;
}, false);


var d= document.getElementById('duree');
var vd = document.getElementById('val_duree');
    vd.value = d.value;
d.addEventListener('input', function(){
    vd.value = d.value;
}, false);

DEMO

Pavan Kumar · Accepted Answer · 2019-11-01 12:22:49Z

You are calling the listener for the input text

var p= document.getElementById('pret');//input-text
var vp = document.getElementById('val_pret');//input-range
    vp.value = p.value;
p.addEventListener('input', function(){ //here is your error
    vp.value = p.value;
}, false);

you should be calling the listner for input range, here is the modified code

var i= document.getElementById('RVN');
var o = document.getElementById('revenue');
    o.value = i.value;
i.addEventListener('input', function(){
    o.value = i.value;
}, false);


var p= document.getElementById('val_pret');// input-range
var vp = document.getElementById('pret');// input-text
    vp.value = p.value;
p.addEventListener('input', function(){//solution
    vp.value = p.value;
}, false);


var m= document.getElementById('val_mensualite');
var vm = document.getElementById('mensualite');
    vm.value = m.value;
m.addEventListener('input', function(){
    vm.value = m.value;
}, false);

Collectives™ on Stack Overflow

code fix for multiple range slider inputs in Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related