Hello,
I have a question that is quite related to this previous post. I have two slider questions on a single page. For each, I need to dynamically update and display two numbers, based on the slider's value. I've successfully programmed this for a single slider question. But I run into complications when there are two sliders.
To give a little more detail: subjects click on a slider to divide tasks between two parts. Screenshot 1 and 2 below show how it's set up for a single slider.
Screenshot 1: Before the slider has been clicked (I've programmed it so that it does not display a default value)Screenshot 2: After the slider has been clicked:
Importantly, the numbers update as the slider is dragged left and right. Below is a screenshot of my Javascript code:
So the way I trigger the change in display is via jQuery("input[type = hidden]").change.
I run into issues when I have two slider questions on the same page, though. If I initially click one slider, the values for the other slider update to reflect the click. For example, in the screenshot below I have only clicked the bottom slider - so the top should not display any value:Interestingly, after the initial click, things seem to work fine; I can click and drag either slider without changing the display values for the other. But the initial click seems to trigger both sliders, even though I only want one.
I suspect I need to use something more targeted than "jQuery("input[type = hidden]").change" in my code. But I'm not sure what that would be. Any thoughts are much appreciated.
Thanks!
Solved
Dynamically Updating TWO Slider Values on the Same Page
Best answer by TomG
Make the selector specific to the question. You can do:
var q = jQuery("#"+this.questionId);
q.find("input[type=hidden]").change(function() {
var F = parseInt(q.find("input.ResultsInput").eq(0).val());
...etc...
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.