Check out the LimeSurvey source code on GitHub!

Slider handle

More
6 years 1 month ago #55103 by wschatten
Hi guys!
So I am trying to change the image of my slider handle.
I have searched the forums and found a few tips and looked at other peoples code.
Here is what I have tried adding to template.css

.ui-slider-handle {
height: 21px !important;
width: 10px !important;
background-image: url( projects.chass.utoronto.ca/polsci-survey...es/slider-handle.gif );
}

I tried using background-image and also tried using:
background: url(slider-handle.gif);

I have been putting my full url in there, i have tried just using:
background-image: url(slider-handle.gif);

The code above is resizing the current slider handle, it just won't change the actual image.

Also, I clear my cache after every change I make to template.css

Any suggestions or tips?

Please Log in to join the conversation.

More
6 years 1 month ago #55109 by holch
As the slider image is an image, I wouldn't work with reseizing it anyway.

Have a look into your template at the slider-handle.gif. You can create your own give and put name it exactly as the current one.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in to join the conversation.

More
6 years 1 month ago #55111 by tpartner
This should do the trick with an absolute URL:
.ui-slider .ui-state-default {
	background: transparent url(http://projects.chass.utoronto.ca/polsci-survey/limesurvey/images/slider-handle.gif) 50% 50% no-repeat;
	border: 0 none;
	height: 23px;
	top: -0.6em;
}

Or with a relative path to an image placed in your template directory:
.ui-slider .ui-state-default {
	background: transparent url(slider-handle.gif) 50% 50% no-repeat;
	border: 0 none;
	height: 23px;
	top: -0.6em;
}

You may also want to tweak the slider callout:
.ui-slider .slider_callout {
	margin-left: -4px;
	top: -25px;
}

And , finally, there is an active class you can use for another image while sliding:
.ui-slider .ui-state-active {
	background-image: url(slider-handle-active.gif);
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
6 years 1 month ago #55115 by wschatten
Hey TPartner,
the code above worked perfectly for what I wanted it to do.
Thank you so much for helping me with this.
I just donated $30 to the site, I hope you at least get a coffee out of that :)

Have a good one guys.
Thanks again!

Please Log in to join the conversation.

More
6 years 1 month ago #55121 by tpartner
No problem, glad we could help. I'm sure that if we weren't on different continents Carsten would buy me a beer ;)

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
6 years 3 weeks ago #55630 by Mazi

tpartner wrote: No problem, glad we could help. I'm sure that if we weren't on different continents Carsten would buy me a beer ;)

Probably not just one but a whole box.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form