How to hide the slider thumb till the participant respond, using the canvas-slider-response?

[prashantig25]

Hello everyone,

I am using the canvas-slider-plugin to display stimuli and the participants have to respond with the slider. However, it would be preferable if the slider thumb could be hidden and the slider track could be seen, till the person clicks on the track. Once the person clicks on the track, the thumb would become visible so that participants can drag it across the slider.
Through some of the earlier posts, it seems that this piece of code can help to hide the slider thumb and track once the participant clicks on it.

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

However, is there a way to ensure that the reverse happens? The following piece of code does not do the opposite. I suspect that is because there is nothing that sets the thumb as hidden before the on_load function runs. Additionally, this piece of code hides both the thumb and track. It would be better to only hide the thumb.

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

I have attached images of what the code is currently doing.

Any help in this respect is appreciated.

Thank you,
Prashanti

[HuangHam]

Don't know if this helps: https://stackoverflow.com/questions/73052978/click-on-event-causing-change-in-pseudo-class-style