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;
}
 

The checkbox needs some CSS to override the Qualtrics styling that is hiding it. Also, adjusting the margins of the slider track seems to work okay to center it beneath the Smiley face. Try updating your HTML with the below, where the CSS is included. Update with your questions QID:

<style type="text/css">
.Skin input[type=checkbox] {
position: relative !important;
opacity: 1 !important;
z-index: 999 !important;
height: 20px !important;
width: 20px !important;
}

#QID23\~track {
margin: 50px !important;
}
</style>
<div style="text-align: left;" class="question-text"><b>Graphic Slider with default images:</b></div>

<div id="sliderContainer">&nbsp;</div>

<div style="display: flex; justify-content: space-between; width: 100%; margin-top: 10px; text-align: center;" class="labels-container"><span style="white-space: nowrap;">Ja - </span> <span style="white-space: nowrap;">Beetje wel - </span> <span style="white-space: nowrap;">Soms - </span> <span style="white-space: nowrap;">Beetje niet - </span> <span style="white-space: nowrap;">Nee</span></div>
<label style="display: block; text-align: center; margin-top: 10px;" id="checkboxLabel"><input type="checkbox" id="excludeOption"> Weet ik niet </label>

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