This is a possible solution. It uses regular sliders and JS instead of constant sum sliders.

​@TomG If I understand it correctly, this solution implements the validation condition of the constant sum while also allowing for skipping the question (in a mobile friendly way) -- but it doesn’t have the feature of “slider capping” that I wanted to keep.

In the video, I can see that the respondent has to milimetrically adjust the sliders so to sum 100 (which can be quite frustrating). I want to prevent the sliders from moving up once the sum reaches 100.

​@psferr,

I misunderstood your post. I thought you didn’t want slider capping because it makes it difficult to adjust once the sum is reached (i.e., the sliders must be adjusted in a specific order and it may have to be done more than once if your mental calculations aren’t correct).

I tried inspecting the Qualtrics elements of a web survey including the native validation condition, but couldn’t find a way to replicate this feature (AND allow for skipping/sum = 0 using Javascript). Does anyone have any insights on how to solve for this? I don’t want to switch to a different type of answer type, since, in my context, sliders are useful/intuitive for respondents. 

Hi,

I tackled this by adding a last hidden slider statement to the constant sum question and setting its value to the wanted total value with the question API on page submit if the sum of all the previous sliders’ values was equal to 0. 

Also had to add a function to reset all sliders to 0 on page ready to allow the use of the previous button, and a function to change the validation text to the actual condition.

I did the same thing as vgayraud. To give it a try, create 4 sliders where the 4th one will be hidden, and set the validation to Must Total = 100. Then, update the question’s JavaScript with the below:

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

var that = this;
var qid = this.questionId;

// Get value of the 4th slider
var val4 = parseInt(document.getElementById(qid+"~4~true-result").value) || 0;

//if 4th slider = 100 on page load, set value to 0
if (val4 === 100) {
	that.setChoiceValue(4, 0)
}
});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

// hide 4th slider
var qid = this.questionId
document.getElementById(qid).querySelector('trtchoiceid="4"]').style.display = "none";
});

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

});

Qualtrics.SurveyEngine.addOnPageSubmit(function() {
var that = this;
var qid = this.questionId;

// Get values of the first 3 sliders
var val1 = parseInt(document.getElementById(qid+"~1~true-result").value) || 0;
var val2 = parseInt(document.getElementById(qid+"~2~true-result").value) || 0;
var val3 = parseInt(document.getElementById(qid+"~3~true-result").value) || 0;

// If all three are zero, set the 4th/hidden slider to 100
if (val1 === 0 && val2 === 0 && val3 === 0) {
	that.setChoiceValue(4, 100)
	document.getElementById(qid+"~total").style.visibility = "hidden";
}
});

Thank you so much ​@Tom_1842 and ​@vgayraud -- this really solved my problem! It’s exactly what I wanted!