Moving labels outside slider bar

Question

Hellow,I would appreciate it if someone can help me. In my survey, I have a slider question where I want to display three pictures. I inserted these pictures by adding labels in the 'Format' section. I want one picture in the middle, one on the left but outside the slider bar, and one on the right but outside the slider bar. However, the pictures cannot be positioned outside the slider bar. Could you please guide me on how to achieve this? SEE the example picture please.

chackbusch · Accepted Answer

@ZGHI think it will be hard with JavaScript because the element style can not be easily overwritten. Furthermore, moving the pictures outside of the question container will be difficult as well. Therefore, you could use CSS to add some margin on the left and ride of the slider. Furthermore, you then reduce the width of the slider by the appropriate width so that it fits again. This would look like:To achieve this, add some custom CSS to your survey via “Look & Feel”:#QID15\~1\~track {    width: calc(100% - 140px) !important; /* Adjust width by subtracting total padding */    margin-left: 70px !important;     margin-right: 70px !important;}If this is too much/less margin, please decrease/increase the margins. If you e.g., decrease to 50px for both left and right, you should reduce the width by 100px instead of 140px. Like this:#QID15\~1\~track {    width: calc(100% - 100px) !important; /* Adjust width by subtracting total padding */    margin-left: 50px !important;     margin-right: 50px !important;}Additionally, you need to adjust the QID. Please check which question ID your slider question has, e.g., via developer tools.BestChristian

ZGH · Answer

Hello,Thank you so much for your help!When using a constant sum question type and sliders as the answer type I was wondering if there was a way to insert an image into the right side of the slider? There is only a text box that will not allow images to be inserted.Thank you

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded