Change sliders (range input) to show thumb only when track is clicked (VAS)

[mrzdcmps]

Hi,
I was wondering if anyone has a solution to modify a range input (for a html questionnaire) or a slider response in a way that resembles a visual ananlog scale. That means the thumb should only appear when the user is clicking on the track. Couldn't make it work so far...
Thanks!

[becky-gilbert]

Hi @mrzdcmps, yes you should be able to do this. See this post on how to hide the slider thumb: #862 Instead of using the click event, you might be better off using the mouseup and mousedown events if you want the thumb to only appear when the user is actively clicking (i.e. pressing the mouse button down). Please let us know if you need any further guidance.

[mrzdcmps]

Thank you! I decided to go a slightly different route since I have multiple sliders and wanted them all to appear on a single page.
JS

 function activatevas(id){
      document.getElementById(id).classList.remove('notclicked');
    }

CSS

    input.notclicked[type=range]::-webkit-slider-thumb {
      visibility: hidden;
    }
    input.notclicked[type=range]::-moz-range-thumb {
      visibility: hidden;
    }
    input.notclicked[type=range]::-ms-thumb {
      visibility: hidden;
    }

HTML (inside a survey_html object)

<input type="range" min="0" max="100" step="1.0" value="-1" name="NA01" id="NA01" class="jspsych-slider notclicked" onclick="activatevas('NA01')">

[becky-gilbert]

Great! Thanks for sharing your solution 😀