How to set dependent slider so that the 2nd anchor moves automatically?

Hi Everyone,

I'm using the following code with constant sum and 2 sliders. I'd like to set it up so that when participants are asked to allocate $10,000 between two choices, the slider that isn't being moved by the participant will move automatically to reflect the allocation. The code below works so that the amount for each choice automatically updates as the slider moves, but the 2nd slider stays put. Any thoughts or suggestions on how to make the 2nd slider move as the participant moves the first slider?




{
var that=this.questionId;
jQuery("[id='"+that+"~2~holder']").addClass("activated");
jQuery("[id='"+that+"~1~holder']").addClass("activated");



jQuery("[id='"+that+"~1~result']").bind('input propertychange',function(){

var A=parseFloat(jQuery("[id='"+that+"~1~result']").val());
console.log(A);
if((A+parseInt(jQuery("[id='"+that+"~2~result']").val()))==10000) {
Qualtrics.SurveyEngine.setEmbeddedData( 'SliderValue1_1', A );
Qualtrics.SurveyEngine.setEmbeddedData( 'SliderValue1_2',parseInt(jQuery("[id='"+that+"~2~result']").val()));
console.log("rturn");
return;
}

jQuery("[id='"+that+"~2~result']").val(10000-A);

jQuery("[id='"+that+"~2~holder']").addClass("activated");
jQuery("[id='"+that+"~2~handle']").css({"left":p*t+"px"});
jQuery("[id='"+that+"~2~bar']").css({"width":p*t+"px"});
var A=parseFloat(jQuery("[id='"+that+"~1~result']").val());
jQuery("#currA").text(A);

var B=parseFloat(jQuery("[id='"+that+"~2~result']").val());
jQuery("#currB").text(B);

});
});