@dankob - You might be interested in the mfCsSliders (mobile friendly constant sum sliders) function.

Slider question types are decently suited for this as they are already configured to have the statements lie horizontally on top of the slider track. In another post regarding custom sum sliders, TomG points out :

"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."

So if you have a Slider question type with 3 sliders, you could add the below to the Custom Validation to make sure that they sum to 100:

Question → Slider 1 → Is Equal to →

$e{ 100 - q://QID1/ChoiceNumericEntryValue/2 - q://QID1/ChoiceNumericEntryValue/3 }

TomG's function will do what you are looking for neatly.

An alternative that I was able to hack together using the Constant Sum question type will come close to what you are looking for but without the gridline labels. This will at least give you access to the 'Must Total' of the Constant Sum slider which prevents increasing slider values once the Total has been reached.

To give it a try, first use Classic Layout and then create a Constant Sum slider with 3 statements. Make sure “Show value” is enabled and “Must Total” is equal to 100.

Then, add the below to the question’s JavaScript in the OnReady section:

var qid = this.questionId;
var row1 = "#"+qid+" >choiceid=1]";
var row2 = "#"+qid+" >choiceid=2]";
var row3 = "#"+qid+" >choiceid=3]";
var label1 = document.getElementById(qid+"~1~text");
var label2 = document.getElementById(qid+"~2~text");
var label3 = document.getElementById(qid+"~3~text");
var total = ".Skin .horizontalbar table.sliderGrid tr th.total";
var totalvalue = ".Skin .horizontalbar table.sliderGrid tr td.totalValue";

jQuery("table").css({"border-collapse":"separate"});

jQuery(total).after(jQuery(totalvalue));

jQuery(row1).before('<tr class="newrow"><td class="newcell" colspan="100%">Question Text 1 Question Text 1 Question Text 1</td></tr>');
jQuery(row2).before('<tr class="newrow"><td class="newcell" colspan="100%">Question Text 2 Question Text 2 Question Text 2</td></tr>');	
jQuery(row3).before('<tr class="newrow"><td class="newcell" colspan="100%">Question Text 3 Question Text 3 Question Text 3</td></tr>');
jQuery(".newrow").css({"border-top":"1px solid"});
jQuery(".newcell").css({"text-align":"left", "color":"#000000", "padding-left":"2px", "padding-top":"10px"});

jQuery("#"+qid+" .xlabel").css({"display":"none"});
jQuery("#"+qid+" .LeftBorder").css({"display":"none"});
jQuery(label1).css({"display":"none"});
jQuery(label2).css({"display":"none"});
jQuery(label3).css({"display":"none"});