modifying jsPsych slider appearance running on cognition.run

Question

I'm trying to change the appearance of the default slider in jsPsych running on cognition.run. I have uploaded various custom css files but I can't seem to make any change to the appearance (of anything).

In jsPsych there is a blue bar to the left of the marker (almost like a progress bar or something (see here picture of jspsych slider) but I'm more interested in an absolute position (without the blue bar similar to this qualtrics style slider).

Any advice on how to modify this?

The code I'm using for this question is below. If there was an in-line solution I would be very grateful.

var initial_judgement_control =  {
          type: 'html-slider-response',
          stimulus: jsPsych.timelineVariable('InJu1'),
          min: 1,
          max: 7,
          start: 4,
          labels: ['1</br>Morally Wrong','2','3','4<br>Neutral','5','6', '7</br>Morally Right'],
          on_finish: function(data){
            var response = JSON.parse(data.response);
            var reactiontime = JSON.parse(data.rt)
            jsPsych.data.addProperties({InJu1: response, InJu1_rt: reactiontime, InJu1_trial1: 1, InJu1_trial2: null, InJu1_trial3: null});
          },
          require_movement: true,
          response_ends_trial: true,
        }

Answer 1

I pasted your code in cognition.run, and I found there is no progress bar if you chose jsPsych library version beyond 6.10. You can change the version of jsPsych Library on the top of the left panel on cognition.run

See the screenshots :html-slider in jsPsych library version 6.10 on cognition.run html-slider in version of 6.20 on cognition.run