Valued displayed above and below a slider for Social Value Orientation

Faye0929
You can create the view but you would not be able to record it unless you include a branch logic with a total sum in slider.
You can create the view with this code inJS
Qualtrics.SurveyEngine.addOnReady(function()
{

/*Place your JavaScript here to run when the page is fully displayed*/
var target= document.getElementById(this.questionId).querySelectorAll("ul.numbers")[0].children;

var qty = target.length;

for (let i = 0; i < qty; i++) {

target[i].innerText="85";
}
const last = Array.from(
  document.getElementsByClassName('slider-container')
).pop();


jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div.labels-container").clone(true).prop('id','newnum').insertAfter(last);

document.getElementById("newnum").querySelector("ul.numbers").children[0].innerText="85";
document.getElementById("newnum").querySelector("ul.numbers").children[1].innerText="76"
document.getElementById("newnum").querySelector("ul.numbers").children[2].innerText="68"
document.getElementById("newnum").querySelector("ul.numbers").children[3].innerText="59"
document.getElementById("newnum").querySelector("ul.numbers").children[4].innerText="50"
document.getElementById("newnum").querySelector("ul.numbers").children[5].innerText="41"
document.getElementById("newnum").querySelector("ul.numbers").children[6].innerText="33"
document.getElementById("newnum").querySelector("ul.numbers").children[7].innerText="24"
document.getElementById("newnum").querySelector("ul.numbers").children[8].innerText="15"

});


Include the below in Custom CSS
.JFEScope .Slider .HBAR .BarContainer .sliderToolTipBox, .JFEScope .Slider .HSLIDER .BarContainer .sliderToolTipBox {
  
    display: none;
}
.JFEScope .Skin .Slider .HBAR .q-slider .statement-container div, .JFEScope .Skin .Slider .HSLIDER .q-slider .statement-container div {
    padding-bottom: 0px;
}
In the question label you can just add a space bar to remove it.
Within survey flow include it a range for example as below and after the question block
Preview:

Hope it helps!

Dear Deepak,
Thank you so much for your help! I tried the codes on Qualtrics, and I would appreciate it if you could help me again with the following questions.
Q1. The label displayed above the slider actually has different values (see image 1), and sorry for the confusion earlier. I tried to edit the code (see image 2), but it didn't work. Do you know how to so it correctly please?

Image (1)
Image (2)

Q2. For the Set Embedded Data, how can I add the data for "You" and "receiver" labels like yours to the Field please?

Q3. Can I only allow participants to move the handle to the 9 values available on the slider (same as the Likert scale, so there will be only 9 options available on the scale)
Q4. Is it possible to show the labels (You receive & Other receives) next to the upper and lower sliders please?

I am sorry to come back with so many questions. Thank you for your help!
Faye

Faye0929

Q1. The label displayed above the slider actually has different values (see image 1), and sorry for the confusion earlier. I tried to edit the code (see image 2), but it didn't work. Do you know how to so it correctly please? - You can use the below code but now don't include a space rather write You receive and your question should look like as below image.

For the Set Embedded Data, how can I add the data for "You" and "receiver" labels like yours to the Field please?

.Q3. Can I only allow participants to move the handle to the 9 values available on the slider (same as the Likert scale, so there will be only 9 options available on the scale)

Q4. Is it possible to show the labels (You receive & Other receives) next to the upper and lower sliders please?- The above code should do the job. Your question would look like:

Dear Deepak,
I managed to change the view! Thank you!
But I couldn't record the response, unsure where the problem arose. I put the following scripts at "Look and Feel" -> "Style" -> "Custom CSS"
For the Embedded data, I manually added "Your Receive" and "Other Receive" to the new fields, then "set a value now" to 85 and 100, respectively (I am not sure which value I should add, so I put the minimum and maximum values of the upper slide to the fields.
Or could you share your project with me, so I can have a look?

For your answer to point (3), thank you for letting me know. I agree with you. I may consider the possibility of using a Likert table and adding the values below the scale.

Many thanks for your help.
Faye

https://community.qualtrics.com/XMcommunity/discussion/comment/51492#Comment_51492To record the response what we have done is we replaced the values visually. But on the backend it's still going from 0 to 100.
So if you break it evenly in 9 parts it will be like
Your ranges are different, so you can compare and include the values to report on it.

Hence you need to use this and hardcode the related values to it. So your survey flow would look like this. You need to do this for all 9 ranges.
Hope it helps!

Thank you Deepak, I tried again. The embedded data showed in the data file, but it's blank. Please see below:-

Thank you
Faye

https://community.qualtrics.com/XMcommunity/discussion/comment/51503#Comment_51503Can you post a screenshot of your survey flow of what you configured. Faye0929

Here are screenshots of the flow. Many thanks!

Faye0929
Sorry but your image is not clear also I'm assuming the default question block has the slider question right?

Dear Deepak,
Yes, the default question has the slider question. I have attached the screencaps of the first 2 ranges here. Many thanks for your help!

https://community.qualtrics.com/XMcommunity/discussion/comment/51979#Comment_51979Faye0929 You need to keep the embedded data You and other same for every branch. It seems inconsistent and will affect data.