Click on event causing change in pseudo class style

Question

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?

Answer 1

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')
  })
}