I am using jsPsych to run a behavioral experiment. In the study participants see a slider and they are expected to drag it to respond. However, I don't want participants to see the slider's thumb before they click the slider. Once they click, I would like the slider thumb to appear on the track. To hide the slider thumb before the participant responds, I made changes to the jsPsych CSS file.

.jspsych-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  visibility: hidden;
}
.jspsych-slider::-ms-thumb {visibility: hidden;}
.jspsych-slider::-moz-range-thumb {visibility:hidden;}

This works well as the slider thumb is hidden when the trial starts. To make the slider thumb appear once the participant clicks on it, I make changes in the HTML code of the trial by using the on_load function.

var slider_eg = {
    type: 'canvas-slider-response',
    stimulus: twoSquares,
    labels: ['0','10'],
    require_movement: true,
    prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)</p>',
    on_load: function(){
      document.querySelector('#jspsych-canvas-slider-response-response').addEventListener('click', function(e){
        e.target.style.visibility = "show"})
    },
};

The participant's response gets recorded when clicked but the thumb does not appear on the track. I am not sure how to fix this because when I use the on_load function and set visibility to "hidden", it works as the slider track disappears. So I am unsure how to make the reverse work.

Any help is appreciated. Thank you, Prashanti