Change slider handle as slider value changes

Plus d'informations
il y a 1 mois 1 semaine #176336 par rickanderson
rickanderson a créé le sujet : Change slider handle as slider value changes
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>

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176337 par holch
holch a répondu au sujet : Change slider handle as slider value changes
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
Les utilisateur(s) suivant ont remercié: DenisChenu, rickanderson

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176338 par rickanderson
rickanderson a répondu au sujet : Change slider handle as slider value changes
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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176343 par DenisChenu
DenisChenu a répondu au sujet : Change slider handle as slider value changes
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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Les utilisateur(s) suivant ont remercié: rickanderson

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176357 par holch
holch a répondu au sujet : Change slider handle as slider value changes

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
Les utilisateur(s) suivant ont remercié: rickanderson

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176358 par tpartner
tpartner a répondu au sujet : Change slider handle as slider value changes
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.
Les utilisateur(s) suivant ont remercié: LouisGac, rickanderson

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176365 par DenisChenu
DenisChenu a répondu au sujet : Change slider handle as slider value changes

tpartner écrit: 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176367 par tpartner
tpartner a répondu au sujet : Change slider handle as slider value changes
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.
Les utilisateur(s) suivant ont remercié: DenisChenu, rickanderson

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176368 par DenisChenu
DenisChenu a répondu au sujet : Change slider handle as slider value changes

tpartner écrit: 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176369 par tpartner
tpartner a répondu au sujet : Change slider handle as slider value changes
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.
Les utilisateur(s) suivant ont remercié: DenisChenu

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176375 par rickanderson
rickanderson a répondu au sujet : Change slider handle as slider value changes
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.
Les utilisateur(s) suivant ont remercié: DenisChenu

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176376 par rickanderson
rickanderson a répondu au sujet : Change slider handle as slider value changes
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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176421 par DenisChenu
DenisChenu a répondu au sujet : Change slider handle as slider value changes

rickanderson écrit: 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176434 par tpartner
tpartner a répondu au sujet : Change slider handle as slider value changes
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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 1 semaine #176441 par DenisChenu
DenisChenu a répondu au sujet : Change slider handle as slider value changes

tpartner écrit: 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!