Customizing the Slider Bar

Thanks, Tom. That is a bit beyond my skill level, but I appreciate knowing where to begin my research!

Hi All, I'm trying to customize the position of labels on a slider but can't seem to find where i can insert CSS or modify the layout with html. Any suggestions would be great. Ideally, i want the first label (None at all) to appear above the 0, the next around the 25% mark, then the 50%, 75% and 100%. Can you create your own automatic label and add it to the standard list? Ideally i would like to add % to the numbers. Any advice would be much appreciated. I'm relatively new to Qualtrics and still trying to navigate my way around. Cheers, Janette !

> @JanetteM said: > Hi All, > I'm trying to customize the position of labels on a slider but can't seem to find where i can insert CSS or modify the layout with html. Any suggestions would be great. Ideally, i want the first label (None at all) to appear above the 0, the next around the 25% mark, then the 50%, 75% and 100%. Can you create your own automatic label and add it to the standard list? Ideally i would like to add % to the numbers. > > Any advice would be much appreciated. I'm relatively new to Qualtrics and still trying to navigate my way around. > > Cheers, > Janette ![](https://uploads-us-west-2.insided.com/qualtrics-us/attachment/ue_5qb8au1ti6xz.png @JanetteM , To add % to the numbers, paste the following code in the "look and feel"-> "Advanced" -> "Add custom css": `ul.numbers li::after { content:"%"; }` For the position of the label, you can put the grid lines value as 4 OR 8 OR 12. output using grid line 4 !

Hi, I'm trying to create a slider with two values: "Yes" on the left and "No" on the right. The slider should be centred on zero and have a max of "99 p" on both sides. So far, I've only worked out how to centre the cursor on zero and have the range from -99 to 99. Any help with this would be great!

@irish_qual - Add "Yes" and "No" as labels: !

@TomG Thanks- I should of mentioned that I also have done that. My problem is with removing the minus from the values on the left of the 0. So both sides read 0 to 99p

> @irish_qual said: > @TomG Thanks- I should of mentioned that I also have done that. My problem is with removing the minus from the values on the left of the 0. So both sides read 0 to 99p You'll have to write JS to do that. Removing the minus signs from the scale is pretty easy, but removing them from the popup tooltips is very complicated.

Hi @aburke, I have just customized colors on my sliders, so I share my code with you and others. ` .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;} `

JenLouiseD

I'd love to know how you remove the minus sign from the scales?

jQuery("#"+this.questionId+" ul.numbers li").each(function() { this.innerHTML = this.innerHTML.replace("-",""); });

(And what is the popup tooltips you are referring to?)

The "3" in the image below: