How to access custom html inputs via jQuery? | XM Community
Skip to main content

I have a custom slider I'm using in a survey question named `rangeInput`.



Naturally I need to access the value in JS, but I am having trouble
Qualtrics.SurveyEngine.addOnReady(function()
jQuery("#rangeInput").change(function() { // this does not work
// ...
}
});

I can access the slider more generally i.e.,

Qualtrics.SurveyEngine.addOnReady(function()
jQuery("input[type = range]").eq(0).change(function() { // this works
// ...
}
});

but for my purposes I need to access my slider by name. How can I learn how to do this? I've tried other variations I've seen around such as
// ...

currentQID = this.questionId;
jQuery("#" + currentQID + "#rangeInput").eq(0).change(function() {

// ...
}
but this also does not work
Also see:
https://www.qualtrics.com/community/discussion/5963/dynamic-accessing-slider-valueand
https://www.qualtrics.com/community/discussion/5819/using-jquery-to-make-a-field-read-only

See attached a working .qsf.
I only added an id to your slider instead of name, i.e.

Then used the following JS:
function sliderChange() {
jQuery("#value")[0].innerHTML = this.value //or anything else you want to do with your value
}

var slider = document.getElementById('rangeInput');
slider.addEventListener('input', sliderChange);

Hope this helps.
How_to_access_custom_html_inputs_via_jQuery.qsf

Terms & ConditionsAccessibility statement