How to set the value on a slider through Javascript

exp_economist
exp_economist Community Member Qubie ✭
edited April 2 in Custom Code

Hello,

I am trying to have two sliders in a question which automatically update one another. If I change the value of the first slider to x, the second slider should update to 500-x. My current code is:

var currentQuestionInfo = this.getQuestionInfo()
var postTag = currentQuestionInfo.postTag
var currentQuestionID = this.getQuestionInfo().QuestionID;
var Sli1Old = 250;
var Sli2Old = 250;
var DomSli = 0;
var respSli1 = document.getElementById(currentQuestionID + '~1~result');
var respSli2 = document.getElementById(currentQuestionID + '~2~result');
    
Event.observe(document, 'mouseup',function(e){
    var currentResponse1 = respSli1.value;
    var currentResponse2 = respSli2.value;
    if( currentResponse1 != Sli1Old ) {
        DomSli = 1;
    } else {
        DomSli = 2;
    }
    if( DomSli == 1) {
        try {
            var forceAns2 = 500 - currentResponse1;
            this.setChoiceValue(2, forceAns2);
        }
        catch(e) {
        }
    }
    var currentResponse1 = respSli1.value;
    var currentResponse2 = respSli2.value;
    Sli1Old = currentResponse1;
    Sli2Old = currentResponse2;
});

All the variables work and the current responses are read out correctly. However, the setChoiceValue function does not work. Any idea on how to fix this?

Thanks in advance!

Best Answer

  • exp_economist
    exp_economist Community Member Qubie ✭
    Accepted Answer

    Figured this out by myself, in case anyone cares. It is:

    var forceAns2 = 500 - currentResponse1;
    document.getElementById("QID9~2~result").setValue(forceAns2);
    document.getElementById("QID9~2~bar").style.width= forceAns2 + "px";