How do you change the slider handle/button image for a survey | XM Community
Solved

How do you change the slider handle/button image for a survey

P
All the look and feel options we have set the slider/handle to a circle which we wish to change to a pentagon shape with a pointer so it emulates a pen paper study. A slider handle having a pointer does give the participant a better visual scale to position the slider on the scale accurately.

As we wish to change this for all questions have tried coding in CSS and had some success in changing the circle to an ellipse and setting the colour to black using the following code:

Skin .horizontalbar .Slider .handle:hover{
width: 5px; /* Set a specific slider handle width */
height: 20px; /* Slider handle height */
background: #000000; /* Black background */
}
.Skin .horizontalbar .Slider .handle{
width: 5px; /* Set a specific slider handle width */
height: 20px; /* Slider handle height */
background: #000000; /* Black background */
}

The only problem with this code is that when the mouse hovers of the slider handle it shows as a circle so not sure what else we have to set in CSS so it always stays as an ellipse?

Ideally we look like to use a pentagon shape slider handle (rectangle with bottom edge replaced with point) that seems to be available in other Qualtrics surveys.

Appreciate any help on changing our slider handle so we can use a slider handle that has an image that has a pointer.
icon

Best answer by mattyb513 15 August 2018, 13:31

View original

11 replies

PeeyushBansal
Rank
Userlevel 7
Badge +33
Please check this post maybe it helps a little:

https://www.qualtrics.com/community/discussion/1198/inserting-custom-image-in-graphical-slider
Best Regards, Peeyush
mattyb513
Rank
Userlevel 6
Badge +6
Here is a working example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_6MgkafhhXVnBEDX?Q_SurveyVersionID=current&Q_CHL=preview

Here is the CSS:

```css
.Skin .SS .horizontalbar .handle, .Skin .SS .verticalbar .SSTrack .handle, .Skin .horizontalbar .BarContainer:hover .bar, .Skin .horizontalbar .Slider .handle, .Skin .horizontalbar .activated .bar {
background: #c32432;
background: url(https://clipart.info/images/ccovers/1495816049surprised-face-trump-png-transparent-clip-art.png) center center no-repeat;
background-size: contain;
height: 40px;
width: 30px;
}

.Skin .SS .horizontalbar .handle:hover, .Skin .horizontalbar .Slider .handle:hover {
background-color: transparent;
}

.Skin .horizontalbar table.sliderGrid {
margin-bottom: 15px; /* Only because my image was too tall */
}
```

Note that my image was tall so I had to add that last line to space out the bars. You can change the size of the image using the height and width in the first CSS declaration there. The image will always be the right ratio within the box you define.
P
Thanks mattyB513 your code works in our survey so it good to know we can change the image of a pointer - your example was appreciated - so no just need to find/create a suitable slider handle for our survey. Thanks for such a prompt reply.
mattyb513
Rank
Userlevel 6
Badge +6
> @Paul_D_AP3C said:
> Thanks mattyB513 your code works in our survey so it good to know we can change the image of a pointer - your example was appreciated - so no just need to find/create a suitable slider handle for our survey. Thanks for such a prompt reply.

Not sure why you wouldn’t use the handle image I chose for you 😉
Baouroux
Thanks @mattyb513 for the code example...I am interested in creating individual custom slider images for multiple sliders in the same survey. Was you CSS originally to be entered into the Survey Look and Feel, and therefore applying to all Sliders? Do you know how I can code that for individual sliders?
Thanks in advance!
Baouroux
Quick update to my previous question! Of course, I see now that I can put the code into the Rich Text editor, of the individual questions (rather than Look and Feel), but my query remains for how have two different images for two sliders that are in the same question (without having to create a separate question with a separate second slider). Thanks!
mattyb513
Rank
Userlevel 6
Badge +6
I don't have qualtrics up right now but there shouldn't be any reason why you couldn't use the `:nth-child()` declaration in CSS to handle this. Essentially, if you have an HTML tree like the following:

```html
<ul>
<li></li>
<li></li>
<li></li>
</ul>
```
You could attack the middle one with the following CSS:
```css
ul li:nth-child(2) {
color: red
}
```
Alternatively, you could inspect each row and see if there is a unique class or ID in the HTML that would allow you to target them. Qualtrics often prints the choice ID in the HTML as the class. This has the benefit of working even with randomization, whereas the first approach would only work if the choices were always presented in the same order.
Baouroux
Thanks so much @mattyb513 ! That sounds promising that it's doable...

I've played around a little, entering a few code trials and tried to inspect the sliders page code (on Chrome inspect), but couldn't see the <ul> <li>...but I could see that the cursors had the following IDs:
<div id="QID130~1~handle" class="handle selected QID130-1-handle" style="left: 328px;"></div>
...then "QID130~4~handle"....."QID130~5~handle"

I was able to get your earlier CSS code posting to work great (starting with .Skin .SS .horizontalbar .handle, .Skin .SS .verticalbar .SSTrack .handle, .Skin .horizontalbar .....), but trying a number of times to integrate the nth-child code didn't work. I always got the same image coming up.

I'm afraid I'm a very novice programmer, so any advice on that assumption would be very much appreciated, including:
- how might the code look like if I attack the image selection per QID130~#number? (if that's the best way to go?
- Is it indeed best that I enter the code in the HTML editor of the question text body?

Thanks again....(and for your great articles/postings),
John
Baouroux
Herewith a solution that seems to work, in the JS API:
jQuery('.handle:eq(0)').css('background-image', 'url("your-image-url-here.png")');

Then just add extra repeat lines to increment the handle:eq value 0, 1, 2 etc.

Though with the restriction that the size of the image was limited in relation to the slider (i.e. you can't scale the image to any size).
Elitza_17
Badge +1
Hi @Baouroux,

I am trying to add CSS to an individual question (not via Look & Feel) - you mentioned one can place the code into the Rich Text editor but I could not find out how... Can you please help me with some advise? Many thanks!
B

Hello everyone,
I create a simple survey to test the css, I have only one question as in the example.
I added the code in the  via Look & Feel, CSS but my slider doesn't change.
Are there other things to do to make it work?
Thanks!

Leave a Reply


Terms & Conditions