- Posts: 4
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
How to personnalize sliders design ?
- Sterlingman
- Topic Author
- Offline
- New Member
Less
More
6 years 4 months ago #161112
by Sterlingman
How to personnalize sliders design ? was created by Sterlingman
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
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:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10108
- Thank you received: 3593
6 years 4 months ago #161135
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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.
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:
The topic has been locked.
- Sterlingman
- Topic Author
- Offline
- New Member
Less
More
- Posts: 4
- Thank you received: 0
6 years 4 months ago #161145
by Sterlingman
Replied by Sterlingman on 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 ?
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 ?
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10108
- Thank you received: 3593
6 years 4 months ago #161148
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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.
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.
Code:
/* 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:
The topic has been locked.
- Sterlingman
- Topic Author
- Offline
- New Member
Less
More
- Posts: 4
- Thank you received: 0
6 years 4 months ago #161153
by Sterlingman
Replied by Sterlingman on topic How to personnalize sliders design ?
Thanks, it works fine.
The topic has been locked.