Estoy tratando de piratear el componente de la barra deslizante de jspsych. Entonces, en el código fuente de jspsych, tienen
.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; }al agregar el código a continuación, logré lograr el efecto de que tan pronto como se hace clic en la barra deslizante, la barra deslizante desaparece:
function(){ document.querySelector('.jspsych-slider').addEventListener('click', function(e){e.target.style.visibility = 'hidden'})}Sin embargo, lo que quiero lograr es que una vez que se haga clic en la barra deslizante, solo desaparezca la uña del pulgar (-webkit-slider-thumb). ¿Cómo se supone que debo hacerlo?
Puede agregar una clase al control deslizante al hacer clic y luego usar CSS para ocultar el elemento pseudo ::-webkit-slider-thumb . Interactuar con pseudoelementos/selectores en JS puede ser un poco tedioso
.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') }) }