Change slider handle as slider value changes

More
6 months 2 weeks ago #176336 by rickanderson
Hi...wonder if anyone is able to help me with this?

I am trying to change the slider handles depending on the slider value (i.e. each slider runs from '0' to '10' and I have 11 different custom slider handle icons - smileys - to represent level of satisfaction from '0' :( to '10' :) each of the 4 questions has 5 sliders - so 5 per page).

I found this code (below) in the manual for 'Dynamic Slider Call-Out Styles' ( manual.limesurvey.org/Workarounds:_Quest...ider_Call-Out_Styles ) which I thought might be ideal for the task but after playing with it for a while I'm not much further forward. I would have thought that I could use the 'sliderVal' in 'function handleCallout' to determine the slider's value and update the handle style accordingly but I don't seem to get a sliderVal returned. I tried downloading the sample survey to look at the code there but I couldn't see the correct effect there either (could template styling changes be an issue?).

Any thoughts or pointers would be much appreciated, I've been trying various approaches to this for a few days and no joy so far.

Cheers

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Slide function
$('.ui-slider', thisQuestion).on('slide', function( event, ui ) {
handleCallout($(this).closest('li.answer-item'), ui.value);
});

// Initial callout states
$('input.text', thisQuestion).each(function(i) {
handleCallout($(this).closest('li.answer-item'), $(this).val());
});

// Handle the callout style
function handleCallout(thisRow, sliderVal) {
if(sliderVal < 20) {
$('.slider_callout', thisRow).css('color', '#D90000');
}
else if(sliderVal < 40) {
$('.slider_callout', thisRow).css('color', '#D96D00');
}
else if(sliderVal < 60) {
$('.slider_callout', thisRow).css('color', '#D9D900');
}
else {
$('.slider_callout', thisRow).css('color', '#00B22D');
}
}

});
</script>

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

LimeSurvey Partners
More
6 months 2 weeks ago #176337 by holch
For the experts to help you, they need to know which version of LS you are using and which template.

The workaround you are referencing is for a pretty old version of LS and will most probably not work with newer version of Limesurvey.

On the other hand, I don't know why you are even using a slider approach here. Sounds a lot more like a good use for a array / matrix type of question, with 10 fixed levels on the scale.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
The following user(s) said Thank You: DenisChenu, rickanderson

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

More
6 months 2 weeks ago #176338 by rickanderson
Hi Holch...thanks for the quick response and info.

The LS version I'm using is 3.15.1 (the article recommended 2.05 or newer so thought it might be OK) with template 'extends_vanilla' (where I have added some styling for the slider tracks and a custom handle icon).

My client wants to use sliders for this survey and they are working fine, the changing slider handle would be a nice addition but not absolutely essential and after seeing the manual article I referenced I thought it might be reasonably straightforward to achieve - now I've been working on it for a while it would be great to work out where I'm going wrong.

Do you know if there might be some alternative means of doing this which is compatible with my LS version?

Cheers

...Rick.

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

More
6 months 2 weeks ago #176343 by DenisChenu
We move to github.com/seiyria/bootstrap-slider

You can use github.com/seiyria/bootstrap-slider#events
var thisQuestion = $('#question{QID}');
 
// Slide function
$('.form-control', thisQuestion).on('slideStop', function( event ) {
$(this).closest(".answer-item").find(".slider-handle").data("my-position",$(this).value());
});
Here, i update data-my-position, but you must do same with a own class for example.

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand .
An error happen ? Before make a new topic : remind the Debug mode .
The following user(s) said Thank You: rickanderson

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

More
6 months 2 weeks ago #176357 by holch

the article recommended 2.05 or newer so thought it might be OK

Yeah, this type of information is always a little misleading. At the time the article is written it is true. And generally it works for this specific branch. But when a totally new branch of Limesurvey comes out, those workarounds generally don't work anymore, especially when there were changes to the template system, which has been the case twice since 2.05 (2.7 and 3.x). So I guess it is save to say that the workaround won't work for 3.15.1. ;-)

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
The following user(s) said Thank You: rickanderson

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

More
6 months 2 weeks ago #176358 by tpartner
If you also also listen for the "slide" event, the handle is dynamic as it moves:

$('.form-control', thisQuestion).on('slide slideStop', function...

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The following user(s) said Thank You: LouisGac, rickanderson

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

More
6 months 2 weeks ago #176365 by DenisChenu

tpartner wrote: If you also also listen for the "slide" event, the handle is dynamic as it moves:

$('.form-control', thisQuestion).on('slide slideStop', function...

I put only .on('slideStop', : it's don't work ?

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

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

More
6 months 2 weeks ago #176367 by tpartner
It works, but only when the handle stops moving.

Try this with and without the "slide" event:

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function() {
 
		var thisQuestion = $('#question{QID}');
 
		// Slide function
		$('.form-control', thisQuestion).on('slide slideStop', function( event ) {
		console.log($(this).val());
		});
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The following user(s) said Thank You: DenisChenu, rickanderson

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

More
6 months 2 weeks ago #176368 by DenisChenu

tpartner wrote: It works, but only when the handle stops moving.

OK, thanks :).

On Demo page : they use only `slide`, this don't work on click :)

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

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

More
6 months 2 weeks ago #176369 by tpartner
Yep, slidestop takes care of clicking.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The following user(s) said Thank You: DenisChenu

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

More
6 months 2 weeks ago #176375 by rickanderson
Thanks Denis...

I'm managing to access the slider values using your code (I had to change $(this).value() to $(this).val()) so should now be able to use these to customise the slider handles, fantastic!

Cheers

...Rick.
The following user(s) said Thank You: DenisChenu

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

More
6 months 2 weeks ago #176376 by rickanderson
Thanks Tony and Denis both.

Very much appreciate you both taking the time to answer, hopefully should be good to go based on your advice.

Cheers

...Rick.

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

More
6 months 2 weeks ago #176421 by DenisChenu

rickanderson wrote: I'm managing to access the slider values using your code (I had to change $(this).value() to $(this).val()) so should now be able to use these to customise the slider handles, fantastic!

Thanks, just for information (and other user) : how do you manage the emoji ? With class ?

Can you pit your snippet here ? (and maybe in our workaround in manual).

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

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

More
6 months 2 weeks ago #176434 by tpartner
Or, even better, a custom question theme. :)

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

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

More
6 months 2 weeks ago #176441 by DenisChenu

tpartner wrote: Or, even better, a custom question theme. :)

Yes, but it's hard to do a global theme.

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

Here : i think it can be an attribute in plugin, i don't think we need a complete question theme :). Then if core update : attribute can still live with the new feature ready.

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

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!