Modifying html-slider-response

[j22tis]

Hi!

I'm looking for some advice on how would I go about modifying slider-response plugin, so that:

1. The slider thumb would not appear at the beginning of the trial, but only when clicked on the slider. (I tried changing the css file thumb parameters, but this seems to have no effect).

2. The slider response would be collected and the trial ends with just a click on the slider, without additional confirmation.

Cheers,
Alan

[becky-gilbert]

Hi @j22tis! To hide the slider thumb, you can remove the CSS rules that set the custom thumb appearance in the jspsych.css file, i.e. the commented-out stuff below. The only bit you want to keep is the -webkit-appearance: none; for .jspsych-slider::-webkit-slider-thumb:

/* thumb */
.jspsych-slider::-webkit-slider-thumb {
  /* border: 1px solid #666;
  height: 24px;
  width: 15px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -9px; */
  -webkit-appearance: none;
}
/* .jspsych-slider::-moz-range-thumb {
  border: 1px solid #666;
  height: 24px;
  width: 15px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer; 
}
.jspsych-slider::-ms-thumb {
  border: 1px solid #666;
  height: 20px;
  width: 15px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -2px; 
} */

I think you also need to set the visibility to hidden for the -ms-thumb and -moz-range-thumb pseudo-classes. You could either add this to jspsych.css or put it in style tags in your HTML file.

.jspsych-slider::-ms-thumb {visibility: hidden;}
.jspsych-slider::-moz-range-thumb {visibility:hidden;}

To get the trial to end when the slider is clicked, you can find the line in the plugin that sets up the click event listener for the next button (line 153 in html-slider-response in jsPsych v6.3.0):

display_element.querySelector('#jspsych-html-slider-response-next').addEventListener('click', function() { ... }

And change this so that the click handler function is applied to the slider instead of the next button. The slider ID is "jspsych-html-slider-response-response", so you would change that line to this:

display_element.querySelector('#jspsych-html-slider-response-response').addEventListener('click', function() { ... }

Then as long as the trial's response_ends_trial parameter is true, the trial should end immediately after the slider is clicked.

The trickier part is getting the thumb to reappear when the slider has been clicked. This is tricky because you can't use JavaScript to set CSS rules for pseudo-classes in the same way that you can for other CSS selectors. But if I understand correctly, it sounds like you want the trial to end anyway when the person clicks the slider, so maybe showing the thumb isn't that important? If it is, you can have a look at the responses to this stackoverflow post about setting CSS pseudo-class rules with JavaScript, and then add the code for this inside the slider's click event handler.

I hope this helps!

[j22tis]

Thank you for the thorough response! This was super helpful! The slider click-ending solution works nicely. I agree, that the reappearing of the thumb might not actually be that important to reappear.

About the thumb - I tried editing my CSS as you suggested and tried adding the two lines about thumb visibility to css as well as inbetween my html file style tags, but none of them seemed to work. I am running the experiment with Google Chrome and when I open the slider page with Developer Tools, the CSS that defines the slider seems to be coming from "user agent stylesheet". (as in the picture below). So currently anything that I edit about the sliders e.g stuff that starts with .slider (even when I comment everything about sliders out) in the jspsych.css file seems to have no effect on the final outcome, when I run the experiment. But it seems to be specific to sliders, because when I remove the jspsych.css from from the html script source entirely, then it has an effect on the appearance. Any ideas why that might be?

[becky-gilbert]

Hmm. Are you using an older version of jsPsych, before v6.2.0? We added the jspsych-slider class to sliders in the *-slider-response plugins in v6.2.0, and my suggestion was to modify the CSS rules for that class. But it looks like your slider doesn't include that class, so the CSS changes that you made aren't applied. Here's what this looks like for me (Chrome):

You could switch to jsPsych v6.2.0 or higher. Or if you don't want to switch versions, you could modify your plugin file to add the jspsych-slider class to the slider HTML:

html += '<input type="range" class="jspsych-slider" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" id="jspsych-html-slider-response-response"></input>';

[j22tis]

Thanks a lot Becky, I now got it working :)

[HuangHam]

Hi! I'm also facing the same issue. I managed to disable the slider thumb by adding intext css: .jspsych-slider::-webkit-slider-thumb{visibility: hidden;}. However, I want the thumb to reappear when subjects click on the slider bar. By adding this: .jspsych-slider::-webkit-slider-thumb:hover{visibility: visible;} allows the thumb to appear when the mouse is clicked but soon disappears when the click is released. Is there a simple way in jsPsychHtmlSliderResponse for the thumb to appear and then stay after people click and disappear again for the next trial?

[cvanheer]

Hello @HuangHam I had the same issue and did it the following way based on something I read here - I am a newb at js coding and jspsych so sorry if this makes no sense but I spent ages on it so thought I would share:

1. I set up two types of classes in my .css - 'clicked' and 'unclicked': (did the same for the Mozilla thumb but didn't include it for brevity)

// css code 
.clicked::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; 
  height: 15px; 
  background: rgba(18,156,192,1);
  border-radius: 10px;   
  cursor: pointer; 
}

.unclicked::-webkit-slider-thumb {
  opacity:0;
} 

This is the .css for the range slider itself can start with

input[type=range] {
...etc
}

**2. I have a range slider, and a button that the person clicks when they have finished selecting their response on the slider. I set my initial range slider to have a class='unclicked' - I made a custom range slider in a jspsych plugin instead of using the jspsych one because I needed it to be more customised with other canvas elements that are animated:

html += '<div class="slide-container"><input type="range" class="unclicked" id="bucket-slider" min="1" max="300" value="150" step = "1"</div>';`
html += '<div class="button-container">';`
html += '<button id="bucket-button-next">Next</button></div>';

bucket_slider = document.getElementById("bucket-slider");
bucket_button = document.getElementById("bucket-button-next");

4. I removed the class from the slider when it was clicked and it changed from 'clicked' to 'unclicked' and then made the button visible

    bucket_button.style.visibility = 'hidden';

    if(trial.require_movement){
      bucket_slider.addEventListener('click', function(e){ // if a change is registered allow the button to be pressed 
      e.target.classList.add('clicked'); 
      e.target.classList.remove('unclicked'); 
      bucket_button.style.visibility = 'visible';
      })
    }

[mmwozniak]

Hi! For quite some time I've been struggling a bit with the fact that the standard html-slider-response needs to have a starting position and often ended looking at this thread but then felt a bit intimidated by my lack of knowledge of CSS. But eventually I learned some basics and made a modified version of the original plugin which implements this change. So if anyone is looking for it you can find it here:
https://github.com/mmwozniak/plugin-html-slider-response-nostart

It doesn't implement the second change mentioned by @becky-gilbert, because I didn't need it, but if someone needs the jsPsych slider without a marker's starting position then it might save them some time.

It was based on the solutions proposed by @cvanheer and involved two things:

1. A new CSS file "jspsych_extra.css" with a new class "jspsych-slider-unclicked", which is exactly the same as the original "jspsych-slider", but with "opacity:0;" added to the parts describing the thumb.
2. A new JS file, which is a copy of the original "plugin-html-slider-response.js" but with two modifications:

• in line 116 <input type="range" class="jspsych-slider-unclicked" value="' + ...> "jspsych-slider" is changed to "jspsych-slider-unclicked" - this initiates the code with the "unclicked" class
• In line 191 added the instruction to replace the "unclicked" class with the standard one after the first click:

document
            .getElementById("jspsych-html-slider-response-response")
            .addEventListener('click', function(e){
                e.target.classList.add('jspsych-slider'); 
                e.target.classList.remove('jspsych-slider-unclicked'); 
            })

EDIT: The new version allows to control whether the starting position is visible or not. This option can by turned on or off by manipulating the parameter show_slider_start: true to show the starting position and false to hide it.

I tested it on jsPsych 7.1.2 and jsPsych 7.3

[jodeleeuw]

Hi @mmwozniak

This is great! How do you feel about submitting a pull request to add these features to the current plugin? I think we could add a parameter for whether or not to show the slider.

[mmwozniak]

Thanks! The current version forces you not to have a starting position, but in the upcoming days I can think about how to implement it to make it optional. Then I can post it here and think about submitting a pull request (haven't done it before, so I need to learn how to)