How to change the color of the slider thumb upon interaction?

Question

I am new to HTML and CSS stuff. I am setting up a website where basically on the screen there will be multiple vertical sliders and people have to make an input to each of these sliders to move to the next screen. What I also want is that when they make any type of input("mousedown","touchstart","change"), there is some visual cue that tells them that they have touched the slider. How do I achieve that? This is my current styling file -

input[type="range"] {
writing-mode: bt-lr;
                appearance: slider-vertical;
                -moz-appearance: slider-vertical;
                -webkit-appearance: slider-vertical;
    background: transparent;
    cursor: pointer;
    height: 15rem;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
   background-color: #053a5f;
   border-radius: 0.5rem;
   width: 0.7rem;  
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important; /* Override default look */
   appearance: none;
   margin-right: -4px !important; /* Centers thumb on the track */

   /*custom styles*/
   background-color: #5cd5eb;
   height: 2rem;
   width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {   
  border: 1px solid #053a5f !important;
  outline: 3px solid #053a5f !important;
  outline-offset: 0.125rem; 
}

And the code that I have already have for other purposes for dealing with input on each sliders looks like following -

                for (var i = 0; i < word_num; i++) {
                    const sliderElement = display_element.querySelector(`#jspsych-html-slider-response-response_${i}`);

                    const interactionHandler = (index) => {
                        return () => {
                            /*Properly working other unrelated code */
                        
                        };
                    };

                    sliderElement.addEventListener("mousedown", interactionHandler(i));
                    sliderElement.addEventListener("touchstart", interactionHandler(i));
                    sliderElement.addEventListener("change", interactionHandler(i));

is there any way I can add a line in the interactionHandler function that will change the color of the slider thumb upon an interaction? I am flexible about the type of change, it can be slider track or thumb color change, it just needs to be a change that tells the user that they have made an input to that slider. Also the input range elements have '#jspsych-html-slider-response-response_${i}' as their ID. thanks so much!

Answer 1

Resolved. For future reference for anyone else, I've wrapped the slider input element with a div element and set the background-color to be transparent and inside the interactionHandler() function I did the following -

                    const interactionHandler = (index) => {
                        return () => {
                            const trackWrapper= sliderElement.parentElement;
                            trackWrapper.style.backgroundColor = "#AFFF33";
                            /*Properly working other unrelated code */
                        
                        };
                    };

And this worked