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

More

7 years 9 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
Offline
LimeSurvey Community Team

More

7 years 9 months ago - 7 years 9 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.