Constant Sum Draggable bars | Experience Community
Skip to main content
Question

Constant Sum Draggable bars

  • August 15, 2026
  • 1 reply
  • 30 views

Forum|alt.badge.img+6
  • Level 2 ●●

I have a 2 slider (bars) constant sum question adding to 10. As a respondent moves one slider, I want the bars on the other to dynamically adjust. Currently, enabling ‘must add to 10’ does not allow the respondent to move the slider beyond 10 minus value of second slider. However, I want the other slider to automatically move as the other slider is moved. Is there a js code someone has that I can use? Thanks for any help!  Pic of current slider attached.

1 reply

Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • August 17, 2026

hey ​@pb7 can you please follow the below steps - 

  1. STEP 1: Disable the ‘must add to 10’ validation
  2. STEP 2:  Add this JS code to the question - 
    Qualtrics.SurveyEngine.addOnReady(function()
    {
    var that = this.questionId;
    var total = 10;

    // Activate both sliders
    jQuery("[id='" + that + "~1~holder']").addClass("activated");
    jQuery("[id='" + that + "~2~holder']").addClass("activated");

    // Calculate pixels per point
    var p = jQuery("[id='" + that + "~1~track']").width() / total;

    // Slider 1 changes
    jQuery("[id='" + that + "~1~result']").bind("input propertychange", function()
    {
    var value1 = parseInt(jQuery(this).val(), 10);

    if (isNaN(value1)) {
    return;
    }

    var value2 = total - value1;

    // Update Slider 2 value
    jQuery("[id='" + that + "~2~result']").val(value2);

    // Update Slider 2 visual position
    jQuery("[id='" + that + "~2~holder']").addClass("activated");
    jQuery("[id='" + that + "~2~handle']").css({
    "left": p * value2 + "px"
    });

    jQuery("[id='" + that + "~2~bar']").css({
    "width": p * value2 + "px"
    });
    });


    // Slider 2 changes
    jQuery("[id='" + that + "~2~result']").bind("input propertychange", function()
    {
    var value2 = parseInt(jQuery(this).val(), 10);

    if (isNaN(value2)) {
    return;
    }

    var value1 = total - value2;

    // Update Slider 1 value
    jQuery("[id='" + that + "~1~result']").val(value1);

    // Update Slider 1 visual position
    jQuery("[id='" + that + "~1~holder']").addClass("activated");
    jQuery("[id='" + that + "~1~handle']").css({
    "left": p * value1 + "px"
    });

    jQuery("[id='" + that + "~1~bar']").css({
    "width": p * value1 + "px"
    });
    });
    });

let me know if this works for you.