Sliders

If you need to have a slider in your survey you can do the following to add it to your survey.

• Add a multiple-text question with one option
• Copy the JS code and replace the values in the editable part to adjust to your needs

/*STARTS EDITABLE PART*/
let questionCode = "Q1"; //Change to current question code
let minValue = 0; //Change to desired min value
let maxValue = 100; //Change to desired max value
let stepValue = 1; //Change to desired step between values in the slider 1 is default
/* ENDS EDITABLE PART*/

let scripts = ["https://synocdn.com/js/survey/library/sliders.js"];

let promises = scripts.map((script) => {
    return new Promise((resolve, reject) => {
        document.querySelector("body").style.opacity = "0";
        let s = document.createElement("script");
        s.src = script;
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
});

Promise.all(promises)
    .then(() => {
        // Ensure sliders.js has been loaded and the sliders function is available
        if (typeof sliders !== "undefined") {
            sliders({
                question_code: questionCode,
                validation: {
                    min_value: minValue,
                    max_value: maxValue,
                    step: stepValue
                }
            });
            document.querySelector("body").style.opacity = "1";
        } else {
            throw new Error("sliders.js not loaded or sliders function not defined");
        }
    })
    .catch((error) => {
        console.error(`Failed to load script: ${error}`);
    });

The result will be similar to this:

The variables used are:

• questionCode: On this one just change for your current question code.
• minValue: This will be the lowest value of the slider.
• maxValue: This will be the highest value of the slider.
• stepValue: This means the space between elements in the slider, the default is 1, which means respondents can move the slider and update 1 by 1. If the slider was from 1 to 5, if using step 1, respondents will have 5 options if the step was 2, respondents will have options 1, 3, and 5.