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' ( www.limesurvey.org/manual/Workarounds:_Q...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>

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.

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.

We move to github.com/seiyria/bootstrap-slider

You can use github.com/seiyria/bootstrap-slider#events Here, i update data-my-position, but you must do same with a own class for example.

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.

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

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

Code:

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

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

It works, but only when the handle stops moving.

Try this with and without the "slide" event:

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

Yep, slidestop takes care of clicking.

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.

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.