musresearch
The code you included does work if I am understanding the need here.
Qualtrics.SurveyEngine.addOnload(function()


{


var q = jQuery("#"+this.questionId);


q.find(".handle").css('visibility', 'hidden');


q.find(".track").on("click , touchstart", function() {


jQuery(this).find(".handle").css('visibility', 'visible');


});});


On questions load, it does make the handle invisible but when you click on the slider the handle does appear. Also, the slider works just as fine to move from extreme left to extreme right.
Would you like to give a visual of what you want when the question loads as well as on click?
I am currently using the "Classic " layout if it helps.
Preview:

Hi there, I was able to replicate the issue with the delay causing the slider to appear distorted. This issue also existed when I tried to use display:none and display:block css. Instead, I was able to get the slider to appear okay after the delay by using the property "content-visibility". Try adding the below JS to the OnReady section of your question's JavaScript:
var q="#"+this.questionId;
jQuery(q).css("content-visibility","hidden");
setTimeout(function () {
jQuery(q).css("content-visibility","visible");
},5000);
Also for the handle being hidden until clicked, I've adapted that code in another post to make it so that the handle also appears on mouse hover. It is configured for 3 slider statements, but configuring for more statements would be just creating new vars (track, handle, clicked), copy/pasting the code blocks, and updating the numbers for 4, 5, 6, etc.
var qid = this.questionId;
var track1 = document.getElementById(qid+'~1~track');
var handle1 = document.getElementById(qid+'~1~handle');
var clicked1 ="no"
var track2 = document.getElementById(qid+'~2~track');
var handle2 = document.getElementById(qid+'~2~handle');
var clicked2 ="no"
var track3 = document.getElementById(qid+'~3~track');
var handle3 = document.getElementById(qid+'~3~handle');
var clicked3 ="no"

jQuery("#"+qid+" .handle").css('visibility', 'hidden');

jQuery(track1).on("mouseenter", function() {
if(clicked1 == "no"){  
   jQuery(handle1).css('visibility', 'visible');
}
});
jQuery(track1).on("mouseleave", function() {
if(clicked1 == "no"){  
   jQuery(handle1).css('visibility', 'hidden');
}
});
jQuery(track1).on("click , touchstart", function() {
clicked1 = "yes"
});
jQuery(track1).on("click , touchstart", function() {
if(clicked1 == "yes"){
    jQuery(handle1).css('visibility', 'visible');
}
});

jQuery(track2).on("mouseenter", function() {
if(clicked2 == "no"){  
   jQuery(handle2).css('visibility', 'visible');
}
});
jQuery(track2).on("mouseleave", function() {
if(clicked2 == "no"){  
   jQuery(handle2).css('visibility', 'hidden');
}
});
jQuery(track2).on("click , touchstart", function() {
clicked2 = "yes"
});
jQuery(track2).on("click , touchstart", function() {
if(clicked2 == "yes"){
    jQuery(handle2).css('visibility', 'visible');
}
});

jQuery(track3).on("mouseenter", function() {
if(clicked3 == "no"){  
   jQuery(handle3).css('visibility', 'visible');
}
});
jQuery(track3).on("mouseleave", function() {
if(clicked3 == "no"){  
   jQuery(handle3).css('visibility', 'hidden');
}
});
jQuery(track3).on("click , touchstart", function() {
clicked3 = "yes"
});
jQuery(track3).on("click , touchstart", function() {
if(clicked3 == "yes"){
    jQuery(handle3).css('visibility', 'visible');
}
});

https://community.qualtrics.com/XMcommunity/discussion/comment/51698#Comment_51698Hi Tom_1842 , this is really helpful, thank you so much! Now it works.
I still have one question though, do you know if there's a way to have the instructions (written part of the slider question - entry text) shown and just the sliders appearing after the delay? I'm using music clips in the written part, then a possible solution would be to split the instructions (with music clips) and the sliders in 2 different questions, but this would not be feasible as I'm using the randomizer.

musresearch glad to hear! To display the Question Text and delay displaying the sliders, try updating the code to the below:
var q="#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div";
jQuery(q).css("content-visibility","hidden");
setTimeout(function () {
    jQuery(q).css("content-visibility","visible");
},5000);

https://community.qualtrics.com/XMcommunity/discussion/comment/51779#Comment_51779Worked!!! Thank you so much again Tom_1842!!!