Welcome to the LimeSurvey Community Forum

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

Personalize dynamic sliders design

  • RitaShen
  • RitaShen's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
5 years 3 months ago #178738 by RitaShen
Personalize dynamic sliders design was created by RitaShen
I'm using the 3.15.5 version

I have created a survey with sliders using "Multiple numerical input" type and 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" and use the code f118 from here: Font Awesome

but it cannot appear on the survey, it would be appear the "star★" no matter what code I use


is there anyone can help me to solve this problem?

and I have another question about the personalize dynamic sliders design
can I use two FontAwesome in the question
like when I choose 0, it will change to the "meh" face.

when I choose 10, it will change to the "smile" face.


can we do this in the LimeSurvey?


Thanks
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 3 months ago - 5 years 3 months ago #178749 by tpartner
Replied by tpartner on topic Personalize dynamic sliders design
With smaller slider scales, you could do it with pure CSS by giving the question a CSS class "smiley-slider-question" and adding something like this to your custom.css file:

Code:
.smiley-slider-question .slider .slider-handle {
  background-color: #FFFFFF !important;
}
 
.smiley-slider-question .slider.slider-reset .slider-handle, 
.smiley-slider-question .slider.slider-untouched .slider-handle {
  opacity: .5;
}
 
.smiley-slider-question .slider-handle::before {
  font-family: FontAwesome;
  line-height: 24px;
  font-size: 28px;
  margin-left: -2px;
}
 
.smiley-slider-question .slider-handle[aria-valuenow="1"]::before,
.smiley-slider-question .slider-handle[aria-valuenow="2"]::before,
.smiley-slider-question .slider-handle[aria-valuenow="3"]::before {
  content: '\f119';
  color: red;
}
 
.smiley-slider-question .slider-handle[aria-valuenow="4"]::before,
.smiley-slider-question .slider-handle[aria-valuenow="5"]::before,
.smiley-slider-question .slider-handle[aria-valuenow="6"]::before,
.smiley-slider-question .slider-handle[aria-valuenow="7"]::before {
  content: '\f11a';
  color: orange;
}
 
.smiley-slider-question .slider-handle[aria-valuenow="8"]::before,
.smiley-slider-question .slider-handle[aria-valuenow="9"]::before,
.smiley-slider-question .slider-handle[aria-valuenow="10"]::before {
  content: '\f118';
  color: green;
}



For larger slider scales, to reduce the number of CSS rules, you may want to us JavaScript to assign classes to the slider handle above and below certain values.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 5 years 3 months ago by tpartner.
The following user(s) said Thank You: RitaShen
The topic has been locked.
  • RitaShen
  • RitaShen's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
5 years 3 months ago #178753 by RitaShen
Replied by RitaShen on topic Personalize dynamic sliders design
thanks Tony
it awesome
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose