Python, Paho, Raspberry Pi, SenseHat and Sliders. I want the values to not reset when I move the sliders

Question

long time stack overflow user - first time caller!

I am currently working on a HTML and Python Paho Server. I have the full functionality of the program, but am stuck on one last little bit.

If the sense hat is running (or sense_emu), the sliders can be used to change the RGB values of all of the pixels. When I stop the server, and re run when the Website is accessed the values appear correctly from when the server was stopped, including the sliders in the correct position.

The issue is that when I move one of the sliders, the remaining 2 reset to 0. I can see where the problem is but am lost as to how I can fix it.

client.onMessageArrived = function onMessageArrived(message) {

            console.log("onMessageArrived:" + message.payloadString + " for topic " + message.destinationName);

            var data = JSON.parse(message.payloadString);

            if (message.destinationName === TOPIC) {
                $("input[type=range].redLevel").val(data.r);
                $("#redLevel").html(data.r);
                $("input[type=range].greenLevel").val(data.g);
                $("#greenLevel").html(data.g);
                $("input[type=range].blueLevel").val(data.b);
                $("#blueLevel").html(data.b);
            }
        }

here is the code that I'm working to fix

$(document).ready(function() {


            $("#clientId").html(CLIENT_ID);
            levelR = 0;
            levelG = 0;
            levelB = 0;


            $("input[type=range].redLevel").on('input', function() {
                levelR = $(this).val();

                payload = {
                    "r" : levelR, "g" : levelG, "b" : levelB
                 };


                var message = new Paho.Message(     
                   JSON.stringify(payload)
                );

                message.destinationName = TOPIC;         
                message.qos = 2;
                message.retained = true;                  
                client.send(message);
            });
            $("input[type=range].greenLevel").on('input', function() {
                levelG = $(this).val();

                payload = {
                    "r" : levelR, "g" : levelG, "b" : levelB
                 };


                var message = new Paho.Message(                
                   JSON.stringify(payload)
                );

                message.destinationName = TOPIC;  
                message.qos = 2;
                message.retained = true;
                client.send(message);
            });
            $("input[type=range].blueLevel").on('input', function() {
                levelB = $(this).val();

                payload = {
                    "r" : levelR, "g" : levelG, "b" : levelB
                 };


                var message = new Paho.Message(    
                   JSON.stringify(payload)
                );

                message.destinationName = TOPIC;  
                message.qos = 2;
                message.retained = true;   
                client.send(message);
            });
            
        });

Answer 1

I managed to sort this out by placing a different value getter inside of the event listener for each slider (shown is the red slider using $(this) rather than the class .identifier)

        $("input[type=range].redLevel").on('input', function() {
            levelR = $(this).val();
            levelG = $(".greenLevel").val();
            levelB = $(".blueLevel").val();

Thanks for pointing me in the right direction.