How to personnalize sliders design ?

More
10 months 2 weeks ago #161112 by Sterlingman
Sterlingman created the topic: How to personnalize sliders design ?
I have created a survey with sliders using "Multiple numerical input" type and I set the slider layout to "On". Now I would like to be able to change the design of the sliders.
I have set the "Handle shape" to "Custom" but I do not understand what I have to do after to choose a new image to be displayed.
I thought it was in the template.css that I had to set a new image but it does not seem.
How can I customize the design of the slider handle and the background image ?
Please see the attached screenshots to help you understanding my question.
Thanks
Attachments:

Please Log in or Create an account to join the conversation.

More
10 months 2 weeks ago #161135 by tpartner
tpartner replied the topic: How to personnalize sliders design ?
The handles are pseudo-elements that use the Font Awesome icons. You can see the unicode values here - fontawesome.io/cheatsheet/ .

Do not include the first 3 characters or the final semicolon.






Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:

Please Log in or Create an account to join the conversation.

More
10 months 2 weeks ago #161145 by Sterlingman
Sterlingman replied the topic: How to personnalize sliders design ?
Thanks for your answer.
Is there a way to use my own image instead of the font awesome icons ?
And is it possible to change the background image (the horizontal bar) of the slider ?

Please Log in or Create an account to join the conversation.

More
10 months 2 weeks ago #161148 by tpartner
tpartner replied the topic: How to personnalize sliders design ?
Yes, you can insert a background image for the handle pseudo-element. Upload your image and add something like below to the end of template.css.

Regarding the slider track - its background is a colour gradient instead of an image. For responsiveness, I would leave it that way but you can change the colours as below.

/* Some more height for the slider container */
.slider-container {
	margin-top: 4.5em;
}
 
/* Background image for the slider handle */
.slider .slider-handle.custom::before {
	display: inline-block;
	width: 36px;
	height: 36px;
	margin-top: -12px;
	margin-left: -8px;
	background: transparent url(../images/orange.png) center center no-repeat;
	background-size: cover;
	content: '';
}
 
/* Move the tooltip up a bit */
.slider .tooltip.top {
	margin-top: -44px;
}
 
/* Colour gradient for the right part of the slider */
.slider-track {
    background-image: -webkit-linear-gradient(top, #00E64D 0%, #00802B 100%);
    background-image: -o-linear-gradient(top, #00E64D 0%, #00802B 100%);
    background-image: linear-gradient(to bottom, #00E64D 0%, #00802B 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00E64D', endColorstr='#00802B', GradientType=0);
}
 
/* Colour gradient for the left part of the slider */
.slider-selection {
	background-image: -webkit-linear-gradient(top, #FFC0CB 0%, #FF0000 100%);
	background-image: -o-linear-gradient(top, #FFC0CB 0%, #FF0000 100%);
	background-image: linear-gradient(to bottom, #FFC0CB 0%, #FF0000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFC0CB', endColorstr='#FF0000', GradientType=0);
}


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:

Please Log in or Create an account to join the conversation.

More
10 months 2 weeks ago #161153 by Sterlingman
Sterlingman replied the topic: How to personnalize sliders design ?
Thanks, it works fine.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!