Graphic slider with labels and N/A checkbox

Hi @JohannesCE , 

To make the "N/A" option work and center the text (or slider), you'll need to make some adjustments to your HTML and JavaScript code. 

1. Centering the Text (or Slider): To center the text (or slider), you can apply some CSS styles to the elements. By adding text-align: center to the container and slider, you ensure that the text and slider are centered. Add the following styles to your HTML elements:

<div style="text-align: center;" class="question-text"><b>Graphic Slider with default images:</b></div>

<div style="text-align: center;" id="sliderContainer"> </div>

<div style="display: flex; justify-content: space-between; width: 100%; margin-top: 10px; text-align: center;" class="labels-container">
    <!-- Your label spans here -->
</div>

<label style="display: block; text-align: center; margin-top: 10px;" id="checkboxLabel">
    <!-- Your checkbox input here -->
</label>
 

2. To make the "N/A" option work, you need to set the slider's value to null when the checkbox is checked. Additionally, you need to handle the case when the checkbox is unchecked to re-enable the slider. Try to modify your JavaScript as below

Qualtrics.SurveyEngine.addOnReady(function() {
    var sliderContainer = document.querySelector('#sliderContainer');
    var labelsContainer = document.querySelector('.labels-container');
    var checkboxLabel = document.querySelector('#checkboxLabel');

    sliderContainer.parentNode.appendChild(labelsContainer);
    sliderContainer.parentNode.appendChild(checkboxLabel);

    var checkbox = document.querySelector('#excludeOption');
    var slider = document.querySelector('.q-slider');
    var that = this;

    // Function to disable/enable the slider based on checkbox state
    function toggleSliderState() {
        if (checkbox.checked) {
            slider.disabled = true;
            that.setChoiceValue(1, null); // Set the choice value to null (N/A)
        } else {
            slider.disabled = false;
        }
    }

    // Event listener for the checkbox
    checkbox.addEventListener('change', function() {
        toggleSliderState();
    });

    // Check the initial state of the checkbox
    toggleSliderState();
});
 

Hi @Nanditha MM , thanks! However, your code is not working for me. This is what I get:
 

I made some adjustments to the JV based on your suggestions, but 

Qualtrics.SurveyEngine.addOnReady(function() {
    var sliderContainer = document.querySelector('#sliderContainer');
    var labelsContainer = document.querySelector('.labels-container');
    var checkboxLabel = document.querySelector('#checkboxLabel');

    var slider = this.getQuestionContainer().querySelector('.horizontalbar');

    sliderContainer.appendChild(slider);
    sliderContainer.parentNode.appendChild(labelsContainer);
    sliderContainer.parentNode.appendChild(checkboxLabel);

    var checkbox = document.querySelector('#excludeOption');
    var that = this;

    // Function to disable/enable the slider based on checkbox state
    function toggleSliderState() {
        if (checkbox.checked) {
            slider.disabled = true;
            that.setChoiceValue(1, null); // Set the choice value to null (N/A)
        } else {
            slider.disabled = false;
        }
    }

    // Event listener for the checkbox
    checkbox.addEventListener('change', function() {
        toggleSliderState();
    });

    // Check the initial state of the checkbox
    toggleSliderState();
});

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
});


Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/
});

The adjusted HTML:
 

<div style="text-align: left;" class="question-text">
  <b>Graphic Slider with default images:</b>
</div>

<div id="sliderContainer" style="text-align: center;">
  &nbsp;
</div>

<div class="labels-container" style="display: flex; justify-content: space-between; width: 70%; margin: 2px auto; text-align: center;">
  <span style="margin-right: 2%; white-space: nowrap;">1) Ja</span>
  <span style="margin-right: 2%; white-space: nowrap;">2) Beetje wel</span>
  <span style="margin-right: 2%; white-space: nowrap;">3) Soms</span>
  <span style="margin-right: 2%; white-space: nowrap;">4) Beetje niet</span>
  <span style="white-space: nowrap;">5) Nee</span>
</div>

<label id="checkboxLabel" style="display: block; text-align: center; margin-top: 10px;">
  <input type="checkbox" id="excludeOption"> Weet ik niet
</label>

The result:
 

Still no checkbox!

Hi @JohannesCE , please try with the below code once:

Qualtrics.SurveyEngine.addOnReady(function() {
  var sliderContainer = document.querySelector('#sliderContainer');
  var labelsContainer = document.querySelector('.labels-container');
  var checkboxLabel = document.querySelector('#checkboxLabel');

  var slider = this.getQuestionContainer().querySelector('.q-slider-container');

  sliderContainer.appendChild(slider);
  sliderContainer.parentNode.appendChild(labelsContainer);
  sliderContainer.parentNode.appendChild(checkboxLabel);

  var checkbox = document.querySelector('#excludeOption');
  var that = this;

  // Function to disable/enable the slider based on checkbox state
  function toggleSliderState() {
    if (checkbox.checked) {
      slider.style.pointerEvents = 'none'; // Disable interactions
      slider.style.opacity = '0.5'; // Reduce opacity for visual indication
      that.setChoiceValue(1, null); // Set the choice value to null (N/A)
    } else {
      slider.style.pointerEvents = 'auto'; // Enable interactions
      slider.style.opacity = '1'; // Restore opacity
    }
  }

  // Event listener for the checkbox
  checkbox.addEventListener('change', function() {
    toggleSliderState();
  });

  // Check the initial state of the checkbox
  toggleSliderState();
});
 

and the css code to your survey to improve the appearance of the disabled slider:

/* Style for disabled slider */
.q-slider-container.disabled {
  pointer-events: none;
  opacity: 0.5;
}
 

Thanks @Tom_1842 , that's the answer I was looking for! Good to know abou the CSS overriding the default styling.