Slider Plugin jspsych 5.0.3

[ghost]

Hello, I need a slider plugin that I want to add for a replication of an experiment the problem is that the experiment was created using jspsych 5.0.3 so there was no slider plugin at this time.. I tried everything, to migrate the experiment to jspsych 7, to translate the code of the plugin htlm slider response for it to work on jspsych 5 or even to create a custom plugin. I spent more than 100 hours on it for nothing so now I come to seek your help I am desperate.
PS: I am very bad in programming I start just few weeks ago

here is the custom plugin I created :

`jsPsych.plugins['html-slider-response'] = (function() {

var plugin = {};

plugin.trial = function(display_element, trial) {
console.log(display_element); // add this line

var response = {
  response: -1
};

// half of the thumb width value from jspsych.css, used to adjust the label positions
var half_thumb_width = 7.5;

var html = '<div id="jspsych-html-slider-response-wrapper" style="margin: 100px 0px;">';
html += '<div id="jspsych-html-slider-response-stimulus">' + trial.stimulus + '</div>';
html += '<div class="jspsych-html-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
if(trial.slider_width !== null){
  html += 'width:'+trial.slider_width+'px;';
} else {
  html += 'width:auto;';
}
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>';
html += '<div>'
for(var j=0; j < trial.labels.length; j++){
  var label_width_perc = 100/(trial.labels.length-1);
  var percent_of_range = j * (100/(trial.labels.length - 1));
  var percent_dist_from_center = ((percent_of_range-50)/50)*100;
  var offset = (percent_dist_from_center * half_thumb_width)/100;
  html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
  'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';  
  html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
  html += '</div>'
}
html += '</div>';
html += '</div>';
html += '</div>';

if (trial.prompt !== null){
  html += trial.prompt;
}

// add submit button

html += '<button id="jspsych-html-slider-response-next" class="jspsych-btn" '+ (trial.require_movement ? "disabled" : "") + '>'+trial.button_label+'';

// wrap the html string in a jQuery object to use jQuery methods
var $html = $("

").html(html);

// append the html to the display element
display_element.append($html);

// define what should happen when the button is clicked
display_element.find('#jspsych-html-slider-response-next').on('click', function() {
// get the response value from the slider input element
response.response = display_element.find('#jspsych-html-slider-response-response').val();

if(trial.response_ends_trial){
// end the trial if response ends trial
end_trial();
display_element.find('#jspsych-html-slider-response-next').prop('disabled', true);
}
});

// function to end the trial
function end_trial(){
// clear all timeouts
jsPsych.pluginAPI.clearAllTimeouts();

// save the trial data
var trialdata = {
stimulus: trial.stimulus,
slider_start: trial.slider_start,
response: response.response
};

// clear the display element
display_element.empty();

// move on to the next trial
jsPsych.finishTrial(trialdata);
}

};

return plugin;
})();
`
I tried to base my work on the official plugin

[ghost]

Problem solved, here is my new updated code which works

`jsPsych.plugins['html-slider-response'] = (function() {

var plugin = {};

plugin.trial = function(display_element, trial) {
console.log(display_element); // add this line

var response = {
  response: -1
};

// half of the thumb width value from jspsych.css, used to adjust the label positions
var half_thumb_width = 7.5;

var html = '<div id="jspsych-html-slider-response-wrapper" style="margin: 100px 0px;">';
html += '<div id="jspsych-html-slider-response-stimulus">' + trial.stimulus + '</div>';
html += '<div class="jspsych-html-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
if(trial.slider_width !== null){
  html += 'width:'+trial.slider_width+'px;';
} else {
  html += 'width:auto;';
}
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>';
html += '<div>';
for(var j=0; j < trial.labels.length; j++){
  var label_width_perc = 100/(trial.labels.length-1);
  var percent_of_range = j * (100/(trial.labels.length - 1));
  var percent_dist_from_center = ((percent_of_range-50)/50)*100;
  var offset = (percent_dist_from_center * half_thumb_width)/100;
  html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
  'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';  
  html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
  html += '</div>';
}
html += '</div>';
html += '</div>';


// add submit button
html += '<button id="jspsych-html-slider-response-next" class="jspsych-btn">'+trial.button_label+'</button>';

// wrap the html string in a jQuery object to use jQuery methods
var $html = $("<div>").html(html);

// append the html to the display element
display_element.append($html);

// define what should happen when the button is clicked
display_element.find('#jspsych-html-slider-response-next').on('click', function() {
  // get the response value from the slider input element
  response.response = display_element.find('#jspsych-html-slider-response-response').val();

  end_trial();
  display_element.find('#jspsych-html-slider-response-next').prop('disabled', true);

  // add console.log statement to check if the button was clicked
  console.log("Button clicked");
});


// function to end the trial
function end_trial(){

  // save the trial data
  var trialdata = {
    stimulus: trial.stimulus,
    slider_start: trial.slider_start,
    response: response.response
  };

  // clear the display element
  display_element.empty();

  // move on to the next trial
  console.log('ending trial'); // add this line

jsPsych.finishTrial(trialdata);
}

};

return plugin;
})();
`