I need to Use one Slider to move Multi sliders using html and js

Question

I am new to coding at all I am using Esp8266 to make an aquarium control as a hobby I need to make this input range to control all LED, the code that I used is changing the value but I need to change the cursor position too, its moving but randomly after a lot of moving to the Main Slider than


                    
                
                Brightness: 
            
            
                 White LED
                
                    
                
                Brightness: 
            
            
                 Worm LED
                
                    
                
                Brightness:  
            


and this is the JS Code :

function updateSliderPWM(element) {
    var sliderNumber = element.id.charAt(element.id.length - 1);
    var sliderValue = document.getElementById(element.id).value;
    document.getElementById("sliderValue" + sliderNumber).innerHTML = sliderValue;
    console.log(sliderValue);
    websocket.send(sliderNumber + "s" + sliderValue.toString());
}

function updateSliderPWMAll(element) {
    var sliderNumber = element.id.charAt(element.id.length - 1);
    var sliderValue = document.getElementById(element.id).value;
    document.getElementById("sliderValue" + sliderNumber).innerHTML = sliderValue;

    var states = document.querySelectorAll(".state span");
    var switchs = document.querySelectorAll(".switch input");

    for (var i = 0; i < states.length; i++) {
        states[i].innerHTML = sliderValue;
    }
    for (var i = 0; i < switchs.length; i++) {
        switchs[i].setAttribute("value", sliderValue);
        websocket.send(switchs[i].className.replace("slider", "") + "s" + sliderValue.toString());
    }
}

nourhomsi · Answer

I think this is what you are trying to do. But you need to notice that your code need to be modified. Your HTML is not clean and could be improved

HTML


    

Brightness: 

    

Brightness: 


    

Brightness:

Javascript

function updateSliderPWMAll(element) {
var sliders = document.querySelectorAll('.slider');
var states = document.querySelectorAll('.state span');

sliders.forEach(slider => {
    slider.value = element.value;
});

states.forEach(state => {
    state.innerHTML = element.value;
});
}

I need to Use one Slider to move Multi sliders using html and js

1 Answers