On a survey, we're using a slider as a way for the respondent to allocate money between two hypothetical subjects on either end of the slider.



I know that in a general question, we can allow the slider to "Show Values" to the respondent so they see what answer they're choosing on it. Because our particular question is an allocation between two subjects, what we'd like is to have that same information displayed, but below the slider and from the perspective of both ends of the slider (so if our slider goes from 0 to 50, and the respondent has dragged the handle on the slider to 37, we'd like the boxes below the slider to show "37" on the left side, and "13" on the right side (50-37, which is what the respondent has allocated to the subject on the other end of the slider by dragging)).



I'm assuming that I just want to get the same snippet of code that Qualtrics uses to show the value above the slider that we could see in a regular setting, but just place that value on a different location of the page, and then another box subtracting that same value from whatever the maximum value on the slider is, but I'm basically completely new to CSS and Javascript so I can't get it to work even by Inspecting the page with Chrome to see what the Page Source and CSS sheets look like. Appreciate any help!