Customize slider plugin - Two sliders side by side

[silvioravaioli]

Dear community,

I am trying to customize the slider plugin to have two sliders, displayed side by side.
I have found no resources on this online.
Any suggestions?

MORE DETAILS
This is the first time I customize a plugin with more than just cosmetic edits.
The study involves showing two stimuli side by side (easy) and eliciting ratings for both, simultaneously (tricky).
Currently, I am using the survey plugin, and I collect two ratings by presenting two survey-boxes side by side.
But typing on boxes is tedious and has extra issues compared to sliders.
Collecting both ratings simultaneously is an important feature of the study, I cannot elicit one at a time.

Thanks a lot,
Silvio

[robfuscator]

Hi Silvio!

I think what you need is possible using the survey-html-form plugin. You would use <input type="range"> elements to create your sliders and style them with CSS to appear side by side.

I hope this helps!

Regards,
r

[silvioravaioli]

Thank you @robfuscator, this solution works just fine.
I attach the code below in case anyone is interested in the future.

JS code

/* Block with double slider */
    var estimate_valueDoubleSlider_block = {
      type: jsPsychSurveyHtmlForm,`
      preamble: '<p>What are the averages for L (left) and R (right)?<br></p>',
      html: '<table align="center" border="0" cellpadding="1" cellspacing="1" style="width:1100px;"><tbody><tr><td style="text-align: center;">' +
      '<input name="first" type="range" class="jspsych-slider" value="50" min="10" max="90" step="1" id="jspsych-html-slider-response" oninput="this.nextElementSibling.value = this.value">' +
      '&nbsp<output>50</output>' +
      '</td><td style="text-align: center;">← L &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp R →</td><td style="text-align: center;">' +
      '<output>50</output>&nbsp' +
      '<input name="second" type="range" class="jspsych-slider" value="50" min="10" max="90" step="1" id="jspsych-html-slider-response" oninput="this.previousElementSibling.value = this.value">' +
      '</td></tr></tbody></table><br><br>',
      button_label: 'Confirm',
      data: {
        task: 'Estimate',
      },
      on_finish: function(data){
        // store values
        var temp0 = data.response;
        // extract the response for the first slider
        var temp = Number(temp0.first);                         
        data.responseLeft = temp;
        console.log(temp)
        // extract the response for the second slider
        var temp = Number(temp0.second);                  
        data.responseRight = temp;
        console.log(temp)
      },
    }

External CSS code

/* SLIDER BAR */
.jspsych-slider {
  -webkit-appearance: none;
  width: 400px;
  height: 20px;
  border-radius: 0px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  labels: ["10","50","90"];
}
/* SLIDER THUMB */
.jspsych-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* border: 1px solid #666; */
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 0%;
  background: #111111;
  cursor: pointer;
}