- Posts: 114
- Thank you received: 1
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Personalize dynamic sliders design
- RitaShen
- Topic Author
- Offline
- Premium Member
Less
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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
5 years 3 months ago - 5 years 3 months ago #178749
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 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:
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.
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.
Attachments:
Last edit: 5 years 3 months ago by tpartner.
The following user(s) said Thank You: RitaShen
The topic has been locked.
- RitaShen
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 114
- Thank you received: 1
5 years 3 months ago #178753
by RitaShen
Replied by RitaShen on topic Personalize dynamic sliders design
thanks Tony
it awesome
it awesome
The topic has been locked.