Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Change slider handle as slider value changes

  • rickanderson
  • rickanderson's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
5 years 4 months ago #176336 by rickanderson
Change slider handle as slider value changes was created 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>
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months 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 answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The following user(s) said Thank You: DenisChenu, rickanderson
The topic has been locked.
  • rickanderson
  • rickanderson's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
5 years 4 months ago #176338 by rickanderson
Replied by rickanderson on topic 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.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176343 by DenisChenu
Replied by DenisChenu on topic Change slider handle as slider value changes
We move to github.com/seiyria/bootstrap-slider

You can use github.com/seiyria/bootstrap-slider#events
Code:
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 , plugin development .
I don't answer to private message.
The following user(s) said Thank You: rickanderson
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months 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 answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The following user(s) said Thank You: rickanderson
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176358 by tpartner
Replied by tpartner on topic Change slider handle as slider value changes
If you also also listen for the "slide" event, the handle is dynamic as it moves:

Code:
$('.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.
The following user(s) said Thank You: rickanderson
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176365 by DenisChenu
Replied by DenisChenu on topic Change slider handle as slider value changes

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 ?

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176367 by tpartner
Replied by tpartner on topic Change slider handle as slider value changes
It works, but only when the handle stops moving.

Try this with and without the "slide" event:

Code:
<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.
The following user(s) said Thank You: DenisChenu, rickanderson
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176368 by DenisChenu
Replied by DenisChenu on topic Change slider handle as slider value changes

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 , plugin development .
I don't answer to private message.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176369 by tpartner
Replied by tpartner on topic 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.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
  • rickanderson
  • rickanderson's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
5 years 4 months ago #176375 by rickanderson
Replied by rickanderson on topic 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.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
  • rickanderson
  • rickanderson's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
5 years 4 months ago #176376 by rickanderson
Replied by rickanderson on topic 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.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose