How to make CSS input range thumb not appear at first - html

Question

I am making a food addiction survey and I need an input range that looks like this:
from https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/.
My question is: How can I make the thumb portion not appear until it has been clicked on at least once? This is important for the survey so that the data is not influenced by it being there.
Here is the CSS of the thumb (you can see the rest at the link above):
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}

Answer 1

This fiddle works in chrome, I had to add styles for the track. The thumb is hidden until you click the range and it appears where clicked. This uses jQuery and I only worked on what applied to chrome.
$('.not-clicked').click(function(e) {
$(this).removeClass('not-clicked');
$(this).addClass('clicked');
});
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
/* Special styling for WebKit/Blink */
.clicked::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
/* Add cool effects to your sliders! */
}
.not-clicked::-webkit-slider-thumb {
-webkit-appearance: none;
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" class='not-clicked'>

Answer 2

You can add Javascript in your part.
Select the thumb part with his id and hide it at loading page. Then, add a click listener, and if your thumb is not already on show state, show it :
var hidden = true;
var thumb = document.getElementsById("thumb");
thumb.hide();
var bt = document.getElementsById("validate");
bt.on("click",function(){...});
//etc
Not tested. if you want more, please provide a fiddleJS link.