Change slider handle as slider value changes

More
4 days 10 hours ago #176454 by tpartner
tpartner replied the topic: Change slider handle as slider value changes

For example : if slider have 5 value : need a system to choose emoji.

I would use question attributes/settings to define the emoji break points so they could be adjusted for any slider scale.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

More
4 days 9 hours ago #176457 by DenisChenu
DenisChenu replied the topic: Change slider handle as slider value changes
Oh, personnaly : i mean : if we have 5 answers : need 5 settings, if 11 answers : need 11 settings etc …

I think of arrayTextAdapt in question template for example : www.limesurvey.org/index.php?option=com_...textadapt&Itemid=729

I think it's a good candidate, but don't find how to setbeasily the params (except with a textarea and some explode("|',value-in-param) or something other .

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

More
4 days 8 hours ago #176462 by tpartner
tpartner replied the topic: Change slider handle as slider value changes
I would limit it to 5 emojis but let the admin select where they change.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

More
4 days 4 hours ago #176475 by rickanderson
rickanderson replied the topic: Change slider handle as slider value changes
The emoji is currently just a background image on the custom slider:
 
.slider .slider-handle.custom::before {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-top: 5px;
	margin-left: 5px;
	border-radius: 20px;
	background: transparent url(../files/slider00.png) center center no-repeat;
	background-size: cover;
	content: '';
}
 

with slider images (see attachment - probably not final images but for testing)



I haven't had time so far but I'm hoping to just read the slider value and update the background image appropriately.

Let me know if you require any further info or if you think there may be a better approach.

Cheers

...Rick.
Attachments:

Please Log in or Create an account to join the conversation.

More
3 days 9 hours ago - 3 days 9 hours ago #176498 by DenisChenu
DenisChenu replied the topic: Change slider handle as slider value changes

rickanderson wrote: I haven't had time so far but I'm hoping to just read the slider value and update the background image appropriately.

Yes, maybe only need update class , something like :
$(this).closest(".answer-item").find(".slider-handle").removeClass("emoji-1 emoji-2 emoji-3 emoji-4 emoji-5 emoji-6 emoji-7 emoji-8 emoji-9 emoji-10").addClass("emoji-"+$(this).value());

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last Edit: 3 days 9 hours ago by DenisChenu. Reason: typo
The following user(s) said Thank You: rickanderson

Please Log in or Create an account to join the conversation.

More
3 days 17 minutes ago #176566 by rickanderson
rickanderson replied the topic: Change slider handle as slider value changes
Seems to be working a treat with following:
$(this).closest(".slider-item").find(".slider-handle").removeClass("emoji0 emoji1 emoji2 emoji3 emoji4 emoji5 emoji6 emoji7 emoji8 emoji9 emoji10").addClass("emoji"+$(this).val());

Thanks again everyone for all your help.

Cheers

...Rick.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!