Change the slider question clickable buttons to be a different color for first position only

Hi there,
I found a discussion that might be helpful to you
https://community.qualtrics.com/XMcommunity/discussion/1133/customizing-the-slider-bar
In that, fleb provides some CSS that can be used to customize how the Slider displays. Below is their code for reference:
.Skin .SS .horizontalbar .SSTrack,.Skin .horizontalbar .Slider .track{height:8px;opacity:.5;filter:alpha(opacity=50);top:10px;border-radius:40px;background-color:#B3914F; border-color:#B3914F;}


.Skin .SS .SSTrack:hover,.Skin .horizontalbar .Slider .BarContainer:hover .track,.Skin .horizontalbar .Slider .activated .track{opacity:1;filter:alpha(opacity=100);background-color:#B3914F; border-color:#B3914F;}


.Skin .SB input,.Skin .SS .horizontalbar .handle,.Skin .SS .verticalbar .SSTrack .handle,.Skin .horizontalbar .BarContainer:hover .bar,.Skin .horizontalbar .Slider .handle,.Skin .horizontalbar .activated .bar{background:#3A2310;}


.Skin .SS .horizontalbar .handle:hover,.Skin .horizontalbar .Slider .handle:hover{background:#3A2310;}
The first line of that will control what the slider bar will look like before it is interacted with. Setting the background-color to #ffffff might give you the visual distinction you're looking for. Go to your survey's Look & Feel and then Style to paste in the CSS to see which colors would work best.

Hi Tom, thank you for the reply. I had already found this code and realize it does not change the behavior. The issue is that the customer may not realize that the slider starting on zero would need to be clicked to actually select the score of zero. So optimally it would be good to have the start of the slider to the left of the zero. Do you know if that would be possible?

I encountered a similar problem with the slider question before, and I am not sure there is a way to make sure that the respondent will know to interact with the slider in the way you want unless they are given instructions within the survey.
As far as visual cues go, you might include an example slider at the top of the survey that has a Default Choice included to let the respondent know what the slider is supposed to look like when it has registered a response, like in the below. I also recommend including the Not Applicable button so the respondent can retract a response if they interact with a slider but then change their mind.

I did a little more looking around and found another thread that I think might help you more.
https://community.qualtrics.com/XMcommunity/discussion/2386/slider-question-how-to-hide-the-handle-until-the-participant-clicks-on-the-track
The code provided by NiC (below for reference to add as JS to each slider question) will hide the Slider from appearing on the bar until it is interacted with. Should work nicely for a visual cue.
var q = jQuery("#"+this.questionId);
q.find(".handle").css('visibility', 'hidden');
q.find(".track").on("click", function() {
jQuery(this).find(".handle").css('visibility', 'visible');
});

Hi Tom, thank you for looking further. I am putting in the code below but how do I correctly enter the ("#"+this.questionID) I have put (#.QID15) and it says there is an error.)

var q = jQuery("#"+this.questionId);
q.find(".handle").css('visibility', 'hidden');
q.find(".track").on("click", function() {
jQuery(this).find(".handle").css('visibility', 'visible');
});

Hi, no need to update anything. Just drop the whole code into the addOnReady piece of the question's JavaScript, like in the below:

I got it, thanks Tom! this is so close. this would be perfect if there was a way to combine a hover function. Right now you have to click for the slider handle to appear, is there a way to incorporate a hover so you could see the handle until you select? Thank you so much, I am learning a lot here and this is a great option for this type of question.

Haha well I am glad I am also giving you ideas! I just got this to work, have not tested in all my questions but this is BAD A$$. Thank you so much. I will spend time learning as I think many doors are open if you understand the code. Thank you!

Sure thing! Try importing the attached QSF and see how it works. I also added "touchstart" next to the "click" so that it will work for mobile devices as well. Below is the updated JS as well.
SliderQuestion.qsfvar q = jQuery("#"+this.questionId); //*defines what q is
var clicked = "no" //*sets clicked equal to no

q.find(".handle").css('visibility', 'hidden'); //*sets the handle to invisible by default

q.find(".track").on("mouseenter", function() {
if(clicked == "no"){
jQuery(this).find(".handle").css('visibility', 'visible');
}
}); //*makes the handle visible when the mouse hovers over it, if clicked is no

q.find(".track").on("mouseleave", function() {
if(clicked == "no"){
jQuery(this).find(".handle").css('visibility', 'hidden');
}
}); //*makes the handle invisible again when the mouse hover leaves, if clicked is no

q.find(".track").on("click , touchstart", function() {
clicked = "yes"
}); //*sets clicked equal to yes upon click

q.find(".track").on("click , touchstart", function() {
if(clicked == "yes"){
jQuery(this).find(".handle").css('visibility', 'visible');
}
}); //* makes handle visible and stay that way upon click, if clicked is yes

Tom_1842 , this really is great! I am experiencing one issue. The hover only stays on for the first click. So for example if you click the first track the next does not show the hover. Can this be fixed or would it always be that way? 🙂

I am glad it is mostly working! I see what you mean, but I am not quite sure how to tackle that with multiple slider statements. Could always just use 1 slider statement per question and copy that question for as many sliders are needed. The hover would always show up that way.

I will definitely ask Qualtrics to add this as a feature request. Thank you for all of your help Tom. I will probably use this as is, I like it better than showing the default as zero!

Jmartell hope you've been well! I was working with sliders recently and I remembered this post, and the piece about not knowing how to tackle this with multiple slider statements. I think I do now and so I rewrote the code for 3 slider statements where each one gets its own 'clicked'. Configuring this for more statements would be just creating new vars (track, handle, clicked), copy/pasting the code blocks, and updating the numbers for 4, 5, 6, etc.
Also, while I left in the JS in that hides the handles by default, I'd recommend adding the below via Custom CSS over in the Style section of the survey's Look & Feel to avoid the handle flashing briefly before it gets hidden:
.handle {
visibility: hidden;
}

Below for the JS:
var qid = this.questionId;
var track1 = document.getElementById(qid+'~1~track');
var handle1 = document.getElementById(qid+'~1~handle');
var clicked1 ="no"
var track2 = document.getElementById(qid+'~2~track');
var handle2 = document.getElementById(qid+'~2~handle');
var clicked2 ="no"
var track3 = document.getElementById(qid+'~3~track');
var handle3 = document.getElementById(qid+'~3~handle');
var clicked3 ="no"


jQuery("#"+qid+" .handle").css('visibility', 'hidden');


jQuery(track1).on("mouseenter", function() {
if(clicked1 == "no"){  
   jQuery(handle1).css('visibility', 'visible');
}
});
jQuery(track1).on("mouseleave", function() {
if(clicked1 == "no"){  
   jQuery(handle1).css('visibility', 'hidden');
}
});
jQuery(track1).on("click , touchstart", function() {
clicked1 = "yes"
});
jQuery(track1).on("click , touchstart", function() {
if(clicked1 == "yes"){
    jQuery(handle1).css('visibility', 'visible');
}
});


jQuery(track2).on("mouseenter", function() {
if(clicked2 == "no"){  
   jQuery(handle2).css('visibility', 'visible');
}
});
jQuery(track2).on("mouseleave", function() {
if(clicked2 == "no"){  
   jQuery(handle2).css('visibility', 'hidden');
}
});
jQuery(track2).on("click , touchstart", function() {
clicked2 = "yes"
});
jQuery(track2).on("click , touchstart", function() {
if(clicked2 == "yes"){
    jQuery(handle2).css('visibility', 'visible');
}
});


jQuery(track3).on("mouseenter", function() {
if(clicked3 == "no"){  
   jQuery(handle3).css('visibility', 'visible');
}
});
jQuery(track3).on("mouseleave", function() {
if(clicked3 == "no"){  
   jQuery(handle3).css('visibility', 'hidden');
}
});
jQuery(track3).on("click , touchstart", function() {
clicked3 = "yes"
});
jQuery(track3).on("click , touchstart", function() {
if(clicked3 == "yes"){
    jQuery(handle3).css('visibility', 'visible');
}
});

HI Tom, I am well thank you, hope the same for you. Thank you so much for remembering me and my quest for this info. I will check it out in the next few weeks. I have not been able to solve for this so I hope it works.... thanks so much and I will let you know!