Dynamically Updating TWO Slider Values on the Same Page | XM Community
Solved

Dynamically Updating TWO Slider Values on the Same Page

  • 14 August 2020
  • 2 replies
  • 207 views

Badge

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)
screenshot1.pngScreenshot 2: After the slider has been clicked:
screenshot2.pngImportantly, the numbers update as the slider is dragged left and right. Below is a screenshot of my Javascript code:
screenshot4.pngSo 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:
screenshot6.pngInterestingly, 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!

icon

Best answer by TomG 14 August 2020, 23:46

View original

2 replies

Userlevel 7
Badge +27

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...

Badge

Thank you! It worked perfectly.

Leave a Reply