如何修改运行在cognition.run上的jsPsych默认滑块外观

云上老周

2026-9-29

实现jsPsych无左侧填充滑块的行内解决方案

cognition.run平台的全局样式优先级较高，上传的自定义CSS容易被覆盖，直接在试验配置中嵌入行内样式即可生效，修改后的完整代码如下：

var initial_judgement_control =  {
  type: 'html-slider-response',
  // 在原有stimulus后拼接样式代码，覆盖默认滑块填充
  stimulus: `${jsPsych.timelineVariable('InJu1')}
  <style>
  /* 适配Chrome、Edge、Safari等webkit内核浏览器 */
  .jspsych-html-slider-response-container input[type="range"]::-webkit-slider-runnable-track {
    background: #dddddd !important;
  }
  /* 适配火狐浏览器 */
  .jspsych-html-slider-response-container input[type="range"]::-moz-range-progress {
    background: #dddddd !important;
  }
  /* 适配旧版Edge浏览器 */
  .jspsych-html-slider-response-container input[type="range"]::-ms-fill-lower {
    background: #dddddd !important;
  }
  </style>`,
  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,
}

如果上述方案仍不生效，可以添加on_load回调强制注入样式，将以下参数添加到trial配置中即可：

on_load: function() {
  const customStyle = document.createElement('style');
  customStyle.textContent = `
    .jspsych-html-slider-response-container input[type="range"]::-webkit-slider-runnable-track {background: #ddd !important;}
    .jspsych-html-slider-response-container input[type="range"]::-moz-range-progress {background: #ddd !important;}
    .jspsych-html-slider-response-container input[type="range"]::-ms-fill-lower {background: #ddd !important;}
  `;
  document.head.appendChild(customStyle);
}