Check out the LimeSurvey source code on GitHub!

Changing Color of Slider Upon Clicking/Moving

More
5 years 3 months ago #68865 by coolresearch
Hello,
I am using several sliders as part of a mandatory question and was wondering if there is any way I can have the slider change color upon moving/clicking it. My goal is to quickly show which sliders were touched (moved) by the participant and which were not.

Many thanks.

Please Log in to join the conversation.

More
5 years 3 months ago #68878 by Mazi
That is a nice idea but such a feature doesn't exist yet. I'm sure that using some Javascript it is possible to e.g. change the slider handle (there are different images for the slider handle at limesurvey\images) once the slider was moved.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 3 months ago - 5 years 3 months ago #68897 by tpartner
You can use the "change" event for the slider to add a class when it's moved and then a little CSS to highlight that class.

1) Add the following to the end of template.js:
$(document).ready(function() {
 
		$( ".ui-slider-horizontal" ).bind( "slidechange", function(event, ui) {
		  $(this).parents('li').addClass('changedSlider');
		});
 
	});

2) Add something like the following to the end of template.css (these styles are for the default template and would need to be modified for other templates):
.numeric-multi .answer li {
	border-bottom: 5px solid #FFFFFF;
}
 
.numeric-multi .answer li label {
	background-color: #FFFFFF;
}
 
.numeric-multi .answer li div.multinum-slider {
    margin: 1.5em 0.5em 0.2em 0;
	padding-left: 0.5em;
}
 
.ui-slider-1 {    
	margin-bottom: 10px;
}
 
.changedSlider {
	background-color: #99FFFF;
}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 5 years 3 months ago by tpartner.
The following user(s) said Thank You: Kaufi

Please Log in to join the conversation.

More
5 years 3 months ago #68907 by Mazi
Nice!

Please add at at the workaround so we won't loose this great feature when older forum topics get deleted.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 3 months ago #68908 by tpartner

Please add at at the workaround so we won't loose this great feature when older forum topics get deleted.


docs.limesurvey.org/Workarounds%3A+Quest...#Slider_Highlighting

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

Please Log in to join the conversation.

More
5 years 3 months ago #68939 by coolresearch
I have to say this: "Wow"

Worked like a charm

Thanks!

Please Log in to join the conversation.

More
5 years 3 months ago #68940 by Mazi

tpartner wrote:

Please add at at the workaround so we won't loose this great feature when older forum topics get deleted.


docs.limesurvey.org/Workarounds%3A+Quest...#Slider_Highlighting

:woohoo:


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 3 months ago #69338 by uxexp
Hello,
I am using a slider exactly like this one with the color change option. I am facing an interesting problem. The sliders change color upon clicking, no problems here. However, if I choose to not complete a mandatory question and click on the "Next" button at the bottom of the page, I get a message saying: "Mandatory questions were not answered". I say OK and then I am presented with the slider question page again. Except, this time, all the colors (from clicking)on the sliders are now gone (none of the sliders are now colored). Any idea why?

Thank you.

Please Log in to join the conversation.

More
5 years 3 months ago #69354 by Mazi
I think this is a technical problem. The sliders change color once you move them, this is done client side by using javascript.
After a mandatory warning the page is reloaded by the server. Though the values are recorded and it is obvious that they have changed, the colors are switched to the default values on page load. Only when being moved, the color would change again because some user action triggers the color change. It has to be implemented server side as well to keep the color change on page load.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 3 months ago #69386 by tpartner
We can use the slider "create" event but it needs to be bound before the page loads.

So, change the code in template.js to this:
$('html').bind('slidecreate', function(event, ui) { 
	$('.slider_callout').each(function(i){
		if($(this).text().length > 0) {
			$(this).parents('li:eq(0)').addClass('changedSlider');
		}
	});
});
 
$(document).ready(function() {
 
	$('.ui-slider-horizontal').bind('slidechange', function(event, ui) {
	  $(this).parents('li:eq(0)').addClass('changedSlider');
	});
 
});

I've updated the wiki - docs.limesurvey.org/Workarounds%3A+Quest...#Slider_Highlighting

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
5 years 3 months ago #69411 by uxexp
Perfect!! Thanks very much.

Please Log in to join the conversation.

More
5 years 3 months ago #69513 by Mazi

uxexp wrote: Perfect!! Thanks very much.

You're welcome!

If our hints have been helpful and you enjoy limesurvey please consider a donation to the team .
We do all this in our free time and you don't have to pay a penny for this software.

Without your help we can't keep this project alive.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 3 months ago #69677 by uxexp
Absolutely. Will surely do!!

Please Log in to join the conversation.

More
5 years 3 months ago #69685 by Mazi

uxexp wrote: Absolutely. Will surely do!!

Great, thanks for your support!


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form