Customizing the Slider Bar | XM Community
Solved

Customizing the Slider Bar


Wanting to know what shade of a color, for example, purple, respondents would want to purchase...dark, medium or light. Doesn't seem like I can customize a slider bar to have the scale represent color. Any other ideas?
icon

Best answer by TomG 26 June 2018, 01:23

View original

12 replies

Userlevel 7
Badge +27
You can customize the slider colors with CSS added to the survey look & feel or inside a `<style>` tag in the question text.
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!
Userlevel 7
Badge +27
@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
Userlevel 7
Badge +27
> @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.
Userlevel 5
Badge +6
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;} `
Userlevel 1

https://www.qualtrics.com/community/discussion/comment/8633#Comment_8633Hi @Tom, I'd love to know how you remove the minus sign from the scales? (Ie. what JS to insert)
(And what is the popup tooltips you are referring to?)

Userlevel 7
Badge +27

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:
image.png

I would like to put a free response box next to the slide bar. Is this possible?

Leave a Reply