Display slider value

Question

I am using a semantic differential question (just a single slider) and I would like to simply display the value selected by the respondent.

Do we have a simple solution for this?

I viewed various slider features in the Question Library but they appear to be attending to other problems.

Whilst on this occasion I am using the single slider, I would prefer to have a solution for both the single and multiple sliders within the same question.

Comments

Doesn't the single value slider question in the CQL suit those needs?  What about it is wrong?

---

That's what I was checking on Zachary. Did any of the options in the Question Library resolve this issue? The reference you made appears to be a multi slider approach and I wasn't sure if it deals with single sliders?

In saying that, I would like a single slider and a multi slider solution where the respondent can see the values change as they move the anchor.

Nate sent me an ssi file to review. Not sure if this is a solution for both single and multi sliders? I will check this out over Easter and report back to you / Nate.

Answer 1

Paul, i think this piece of code might work for your requirement

$( ".slider_container" ).on("slide", function( event, ui ) {
    var value = ui.value;
    $(this).find(".ui-slider-handle").html("<span class='slval'>"+value+"</span>");
});

Comments

Thanks for the helpful script. Greatly appreciated.

I conducted a test a short while ago. It appears to work fine on a single and multi row slider question.

Where it needs a tweak is when you have a scale that differs from the values in the scale list.

One example I just tested was where I have a slider from -5 to +5. It displays 1-11 instead of the labels?

Do you have a solution for that situation also?

Many thanks.

---

Paul, I didn't had a working script ready.
But I tweaked the solution for you for the current requirement.

$( ".slider_container" ).on("slide", function( event, ui ) {
    var value = ui.value;
    var ar=[-5,-4,-3,-2,-1,0,1,2,3,4,5];
    $(this).find(".ui-slider-handle").html("<span class='slval'>"+ar[value-1]+"</span>");
});

Note that, this is not a generalized solution but it will work fine for your current requirement

---

Thanks for the additional solution. It appears to work fine.

The only other issue I thought I would raise is the actual value displayed within the slider anchor isn't quite centred. Is it possible to make the value centred rather than left justified (as it currently is)?

Thanks again.

---

May be this lines of CSS code might help you

.ui-slider-handle
{
    text-align: center !important;
    font-size: 11px;
    font-weight: bold !important;
}
.slval
{
    position: relative;
    top:20%;
    left:2%;
}

---

Apologies for not getting back to you sooner. Been way too busy.

That CSS script did a lovely job on centring the anchor value. Really good job.

Much appreciated.

---

Just one further question where I have the -5 to +5 scale. It all works beautifully. Is it possible to display the positive values with a "+" in front of them? That just puts the icing on the cake.

---

Just change the array as below enclosing each value in apostrophes.

var ar=["-5","-4","-3","-2","-1","0","+1","+2","+3","+4","+5"];

---

Wonderful. Thanks so much.

That did the job.

Happy Easter. Take care, stay safe.

Regards Paul.

---

Happy Easter Paul..

---

Hi Karthik. Hope you are well my friend.

Just one last improvement I was hoping to make on this.

So far, you have provided some very nice solutions. Thanks very much.

The last improvement I would like to make (if possible), is when the page loads, the anchor for all sliders are sitting in the middle on "0". That's fine as I am happy with that. If I click a value on the slider, the anchor moves and the value displays nicely. The only time the value does not display is when I click the anchor to remain on "0". Is it possible for "0" to display?

Note that the respondent must click on every slider to move to the next survey page. Also note that if I click a value like +2 or -3 and then click "0", the "0" is displayed just fine. The "0" does not display if I simply click on it when the page loads.

If you have any further questions, please let me know.

Thanks once again for your friendly assistance.

Regards Paul.

---

I didn't have a clue on this request Paul.

Only thing that came to my mind is making it display as '0' on page load uisng below snippet of code.

$(document).ready(function(){
    $(".ui-slider-handle").html("<span class='slval'>"+0+"</span>");
});

But I don't think it is apt because, even though it is displayed as '0' in back end the variable will be empty and respondent will be forced to answer if he/she tries to move forward without clicking or moving the slider and respondent may get confused with this.

However I will give a try in my free time and will get back to you if found any clue for this requirement.

Regards,
Karthik

---

That solution is "nice to know" as it almost does the job. It's handy to have.

The best solution no doubt is to have every slider answered and if they do click on a "0" immediately for any slider, it would be nice to have "0" appear for that particular slider. Right now that does not happen.

If you do find a solution, please send it on. Much appreciated.

Thanks so much, Paul.