I have a behavioural experiment on jsPsych. Currently, I present participants with an image that is drawn on HTML canvas and they have to respond with a slider. However, I don't want them to see the thumb till they click on the slider (to avoid a bias). How can I do that?

.jspsych-slider::-webkit-slider-thumb {
  /*border: 1px solid #666;
  height: 24px;
  width: 15px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;*/
  -webkit-appearance: none;
  /*margin-top: -9px;*/
  /*visibility: hidden*/;
}

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

I tried updating these in the CSS file for jsPsych but this does not seem to help. Also, I tried another exisiting solution for a similar plugin but that is also not helping with the canvas-slider-plugin.

on_load: function(){
  document.querySelector('#jspsych-html-slider-response-response').addEventListener('click', function(e){
    e.target.style.visibility = 'show'})
},

Any help in this respect is appreciated. Thank you, Prashanti