I'm trying to hack the jspsych's slider bar component. So in jspsych's source code, they have
.jspsych-slider {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
background: transparent;
}
.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;
}
by adding the code below, I managed to achieve the effect that as soon as the slider bar is clicked, the slider bar disappears:
function(){
document.querySelector('.jspsych-slider').addEventListener('click', function(e){e.target.style.visibility = 'hidden'})}
However, what I want to achieve is that once the slider bar is clicked, only the thumb nail (-webkit-slider-thumb) disappears. How am I supposed to do it?
You could add a class to the slider on click and then use CSS to hide the pseudo ::-webkit-slider-thumb element. Interacting with pseudo elements/selectors in JS can be a bit tedious
.jspsych-slider {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
background: transparent;
}
.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;
}
.jspsych-slider.hidden::-webkit-slider-thumb { visibility: hidden }
function(){
document.querySelector('.jspsych-slider').addEventListener('click', function(e){
e.target.classList.add('hidden')
})
}