Changing Default Start Position to Enable Click-to-Place

Hi,

You can use this in the New Survey Taking Experience.

Qualtrics.SurveyEngine.addOnReady(function() {

    var questionId = this.questionId;

    // Inject CSS class once to hide slider thumb when .thumb-hidden is applied
    if (!document.getElementById('slider-thumb-hidden-style')) {
        var style = document.createElement('style');
        style.id = 'slider-thumb-hidden-style';
        style.textContent = [
            '.slider-container.thumb-hidden input[type="range"]::-webkit-slider-thumb {',
            '    visibility: hidden !important;',
            '    pointer-events: none !important;',
            '}',
            '.slider-container.thumb-hidden input[type="range"]::-moz-range-thumb {',
            '    visibility: hidden !important;',
            '    pointer-events: none !important;',
            '}'
        ].join('\n');
        document.head.appendChild(style);
        console.log('Global thumb-hidden CSS injected.');
    } else {
        console.log('Global thumb-hidden CSS already present — skipping.');
    }

    // Find the question container
    var questionContainer = document.querySelector('section.question[id="question-' + questionId + '"]');
    var sliderContainers = questionContainer.querySelectorAll('.slider-container');
    if (sliderContainers.length === 0) {
        console.warn('No .slider-container found inside section#question-' + questionId);
        return;
    }

    sliderContainers.forEach(function(container, index) {

        var sliderStatement = container.closest('.slider-statement');
        var isUnanswered = sliderStatement && sliderStatement.classList.contains('unanswered');

        console.log('Container #' + index + ' — unanswered:', isUnanswered);

        if (!isUnanswered) {
            console.log('Container #' + index + ' already answered — skipping.');
            return;
        }

        // Add class to hide thumb
        container.classList.add('thumb-hidden');
        console.log('thumb-hidden added to container #' + index, container);

        container.addEventListener('click', function() {
            container.classList.remove('thumb-hidden');
            console.log('thumb-hidden removed from container #' + index, container);
        }, { once: true });

    });



});