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,
        }