Custom sum sliding bars

Hi there, if you still need, I would recommend using the Slider question type as it is already configured to have the statements lie horizontally on top of the slider track. Your statement text looks like you might not need to sum across the 5 statements, but if you do, you could put in some custom validation so that the respondent can only proceed if the sum of all the sliders is equal to a certain amount or they will see an error message.
This can be put in place by creating a fake next button, hiding the real one, and performing a validation check using JavaScript which will either click the real Next Button if successful or display a Custom Error message if not. The fake next button will have CSS so that it looks like the real one. First, create a slider question that has 3 tracks.
Then, add the below to the question's JavaScript in the OnReady section. If the tracks sum to 100, the real next button is clicked. If they do not, a Custom Error message is shown:
//define values to capture
var qid = this.questionId;
var track1 = document.getElementById(qid+'~1~true-result');
var track2 = document.getElementById(qid+'~2~true-result');
var track3 = document.getElementById(qid+'~3~true-result');

//create fake next button, needs CSS to mimic real one
const next = document.getElementById("NextButton");
const newnext = next.cloneNode(true);
newnext.id = "newnext";
jQuery(newnext).appendTo("#Buttons");
jQuery(next).css({"visibility":"hidden"});

//validation check
var newnextclick = document.getElementById("newnext");
jQuery(newnextclick).on("click , touchstart", function() {

var slider1 = jQuery(track1).val() || 0;
var slider2 = jQuery(track2).val() || 0;
var slider3 = jQuery(track3).val() || 0;
var slidertotal = parseInt(slider1)+parseInt(slider2)+parseInt(slider3);
Qualtrics.SurveyEngine.setEmbeddedData("slidertotal", slidertotal);

if (slidertotal == 100) {
jQuery(next).click();
}
else {
var vale = document.getElementById("QR~"+qid+"~VALIDATION");
vale.style.display = "block";
vale.innerHTML = "Custom Error Message - Must sum to 100"
}

});
Then, add the below CSS in the Style section of the survey's Look & Feel. The below is for Classic layout and references the id of the newly created fake next button:
#newnext {
    border: none;
    color: #fff;
    font-size: 16px;
    padding: 8px 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
    text-align: center;
    text-decoration: none;
    -webkit-appearance: none;
    transition: background .3s;
    background-color: #007ac0;
}
Finally, if you want to capture the slidertotal as its own field, create an Embedded Data element with a field called "slidertotal" and place it at the top of the Survey Flow.

You don't need a fake next button for this. In most cases (when statements are not conditional through the use of carryforward or display logic), it can be done with Custom Validation - the first row should be equal to the required sum minus all the other rows.
Also, I have a function, mfCsSliders (mobile-friendly constant sum sliders) that does this. It works with any number of statements and displays the total in real time.

TomG I didn't think of that! That is much simpler, thank you. Cool function also!