Tick marks for slider?

[anasophiarc]

Hello, I am using the html slider response in one of my trials where the participant needs to indicate a ratio from 100:0 - 75:25 -50:50 - 25:75 - 0:100. It is currently a little bit unclear where exactly a participant may be landing is there a way to add tick marks to the slider? Alternatively are there other strategies to make the slider cleaner looking? thanks

[Shaobin-Jiang]

An example piece of code:

let jsPsych = initJsPsych();

let trial = {
    type: jsPsychHtmlSliderResponse,
    stimulus: 'Hello world',
    min: 1,
    max: 5,
    slider_start: 1,
    on_load: function () {
        let wrapper = document.querySelector('.jspsych-html-slider-response-container');
        wrapper.style.width = '20vw';

        let tick_marker_wrapper = document.createElement('div');
        tick_marker_wrapper.style.width = '100%';
        tick_marker_wrapper.style.display = 'flex';
        tick_marker_wrapper.style.justifyContent = 'space-between';

        for (let val of ['100:0', '75:25', '50:50', '25:75', '0:100']) {
            let tick_marker = document.createElement('span');
            tick_marker.innerText = val;
            // tick_marker.style.fontSize = '0.7em'
            tick_marker_wrapper.appendChild(tick_marker);
        }

        wrapper.appendChild(tick_marker_wrapper);
    },
};

jsPsych.run([trial]);