Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

How to personnalize sliders design ?

  • Sterlingman
  • Sterlingman's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 3 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 3 months ago #161135 by tpartner
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.






Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Sterlingman
  • Sterlingman's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 3 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 ?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 3 months ago #161148 by tpartner
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.

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.
The topic has been locked.
  • Sterlingman
  • Sterlingman's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 3 months ago #161153 by Sterlingman
Replied by Sterlingman on topic How to personnalize sliders design ?
Thanks, it works fine.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose